JSFiddle - React, Tailwind, and code Playground

by diaryfakta

HTML

<div class='btn_df'><a href='#'>Button</a>

CSS

.btn_df{
font-family:arial;
font-size:20px;
color:#000;
background-image: linear-gradient(bottom, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -o-linear-gradient(bottom, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -moz-linear-gradient(bottom, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -ms-linear-gradient(bottom, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -webkit-gradient(
linear,left bottom,left top,color-stop(0, rgb(88,177,201)),color-stop(1, rgb(0,163,212)));
padding:5px;
height:auto;
width:100px;
border-radius:5px;
text-align:center;
box-shadow:1px 1px 5px #000;
text-shadow:1px 1px 1px #000000;
}
.btn_df:hover{
background-image: linear-gradient(top, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -o-linear-gradient(top, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -moz-linear-gradient(top, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -webkit-linear-gradient(top, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -ms-linear-gradient(top, rgb(88,177,201) 0%, rgb(0,163,212) 100%);
background-image: -webkit-gradient(
linear,left top,left bottom,color-stop(0, rgb(88,177,201)),color-stop(1, rgb(0,163,212)));
}
.btn_df a{
color:#fff;
text-decoration:none;
}
.btn_df:active{
position:relative;
top:2px;
border: 1px solid hsla(0,0%,0%,.25);
border-radius:5px;
box-shadow: inset 0 0 10px #000000;}