JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<body>
  <button class='btn'> Primary </button>
  <button class='btn'> Secondary </button>
</body>

CSS

.btn {
  text-align: center;
  color: white;
  text-shadow: 0 0 4px rgb(96,96,96);
  border: 1px solid #adadad;
  border-radius: 4px;
  padding: 6px 12px;
  background-image: linear-gradient(to bottom,#15FF86 0,#68BB42 100%);
  background-repeat: repeat-x;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.42857143;
}
.btn:nth-child(1) { background:linear-gradient(#000, #0000ff); }
.btn:nth-child(2) { background:linear-gradient(#000, #ff0000);}

.btn:hover {
  color: white;
  background-color: #68BB42;
  border-color: #adadad;
  background-position: 0 -5px;
}

.btn:active {
  background-color: #279f43;
  background-image: none;
  border-color: rgba(27,31,35,0.5);
  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
}