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


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


<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>


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; 


enter image description here