Tinting and shading effects in CSS [closed]


How to provide these kind of tinting and shading effects to round shaped buttons in CSS?enter image description here


Answers:


The shape of the buttons can be done with border-radius applied on a regular button element and their colours are just a linear-gradient background. In the shade version another gradient is applied over the base gradient with a ::before pseudoelement

Codepen demo


Markup

<button class="green">GO</button>
<button class="green shade">GO</button>
<button class="green disabled">GO</button>

<button class="blue">Back</button>
<button class="blue shade">Back</button>
<button class="blue disabled">Back</button>

CSS

button {
  position: relative;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}


.green { background: linear-gradient(to bottom, #18c99d, #12977c) }
.blue { background: linear-gradient(to bottom, #707b98, #283b6b) }

.shade::before { 
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
  border-radius: inherit;
  top: 0; 
  left: 0;
  background: rgba(0, 0, 25, .25) 
}

.disabled { 
  opacity: .3; 
  cursor: not-allowed; 
}

Result

enter image description here