JSFiddle - React, Tailwind, and code Playground

by Jesper Brinch Korsbakke

HTML

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

SCSS

$buttonColor: #232f41;

.button {
  background-color: $buttonColor;
  border-radius: 7px;
  color: #efefef;
  border: none;
  padding: 11px 35px;
  font-family: Roboto, sans-serif;
  box-shadow: 6px 6px 11px 0 rgba(0, 0, 0, .19);
  transition: all 0.2s ease;
  position: relative;
  
  &:hover {
    background-color: lighten($buttonColor, 10%);
    cursor: pointer;
  }
  
  &:active {
    background-color: $buttonColor;
    top: 1px;
    left: 1px;
    box-shadow: 5px 5px 11px 0 rgba(0, 0, 0, .19);
    outline: none;
  }
  &:focus {
    outline: none;
  }
}