JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<button class="button">
  Click me
</button>

CSS

/* Boilerplate */
button {
  all: unset;
  float: right;
  display: inline-block;
  color: white;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 1.5px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 17px;
}

/* Important stuff below */





.button {
  padding: 40px;
  background-color: #58cc02;
  border-bottom: 4px solid #58a700;
  box-shadow: 0 15px 0 #58a700; 
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

.button:active {
  box-shadow: 0 0 0 #58a700; 
  transform: translateY(15px);
}