JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<a class="simpleButton" onclick="window.location='/something'">text</a>

CSS

.simpleButton {
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    
    -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    box-shadow:inset 0px 1px 0px 0px #cae3fc;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
    background-color:#79bbff;
    -webkit-border-top-left-radius:13px;
    -moz-border-radius-topleft:13px;
    border-top-left-radius:13px;
    -webkit-border-top-right-radius:13px;
    -moz-border-radius-topright:13px;
    border-top-right-radius:13px;
    -webkit-border-bottom-right-radius:13px;
    -moz-border-radius-bottomright:13px;
    border-bottom-right-radius:13px;
    -webkit-border-bottom-left-radius:13px;
    -moz-border-radius-bottomleft:13px;
    border-bottom-left-radius:13px;
    text-indent:0;
    border:1px solid #469df5;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:normal;
    font-style:normal;
    height:45px;
    line-height:45px;
    width:133px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #287ace;
}
.simpleButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
    background-color:#4197ee;
}.simpleButton:active {
    position:relative;
    top:1px;
}