JSFiddle - React, Tailwind, and code Playground

by Vicen

HTML

<a href="#pricing-section" class="act">Signup and buy</a>
<a class="act s" href="/themes">Try CSS Hero</a>

CSS

.act {
  margin-left: 10px;
  padding: 12px 35px;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  background: #40bc69;
  font-family: proxima-semibold;
  border-bottom: 3px solid #2d8349;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: white;
  text-transform: uppercase;
}

.act:hover {
  background: #007dff;
  border-color: #0057b3;
  color: white;
}

.act:active {
  position: relative;
  top: 1px;
}

.act.s {
  background: #181b1d;
  color: #8c9398;
  border-color: #111315;
}

.act:hover {
  background: #007dff;
  border-color: #0057b3;
  color: white;
}