JSFiddle - React, Tailwind, and code Playground

by codigoadicto

HTML

<button>jose</button>

CSS

button{
    display: inline-block;
    position: relative;
    padding: 7px 15px;

    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    
    font: 15px/1.4 "myriad-pro-1","myriad-pro-2","Lucida Grande",Sans-Serif;
    
    background-color: #E01622;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F2868B), to(#E01622));
    background-image: -webkit-linear-gradient(top, #F2868B, #E01622);
    background-image: -moz-linear-gradient(top, #F2868B, #E01622);
    background-image: -ms-linear-gradient(top, #F2868B, #E01622);
    background-image: -o-linear-gradient(top, #F2868B, #E01622);
    
    color: white !important;
    
    -webkit-box-shadow: inset 0 1px 1px #fff,0 3px 3px rgba(0,0,0,0.6);
    -moz-box-shadow: inset 0 1px 1px #fff,0 3px 3px rgba(0,0,0,0.6);    
    box-shadow: inset 0 1px 1px #fff,0 3px 3px rgba(0,0,0,0.6);
    
    border: 1px solid #F2868B !important;
    font-weight: 600;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

button:hover{
    -webkit-box-shadow: inset 0 2px 6px #fff,0 3px 3px rgba(0,0,0,0.6);
    -moz-box-shadow: inset 0 2px 6px #fff,0 3px 3px rgba(0,0,0,0.6);
    box-shadow: inset 0 2px 6px #fff,0 3px 3px rgba(0,0,0,0.6);
}