JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<input type="submit" href='#' class='signup' value="✓ Sign Up">

CSS

.signup {
  padding: 1.2em 2.3em;
  padding-left: 3.5em;
  color: #d8e6fc;
  display: inline-block;
  background: #347EED;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: sans-serif;
  font-weight: 800;
  font-size: .8em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0.2em solid #1569e9;
  position: relative;
}

.signup:hover, .signup:focus {
  background: #1d6feb;
  color: #eff5fe;
}

.signup:active {
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}
.signup:hover, .signup:focus {
  box-shadow: 0 0 0 5px #92baf5;
}