JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
        <a class="miboton" href="#">Mi Boton</a> 
    </div>

CSS

#menu{
margin:80px;}
.miboton {
    padding-right: 40px; 
    padding-left: 40px; 
    font-weight: bold; 
    font-size: 40pt;
    padding-bottom: 40px;
    color: #F0F1F5;
    padding-top: 40px; 
    font-family: verdana, arial, sans-serif;
    background-color: #7B8BD1; 
    text-decoration: none;
     background: -webkit-linear-gradient(#7B3399 20%, #7B8BD1 80%);
   background: -moz-linear-gradient(orange, #7B8BD1);
   background: -o-linear-gradient(orange, #7B8BD1);
    border-radius:20px;
    box-shadow:5px 5px 5px #555;
}
.miboton:link {
    border-right: #B4B4F0 2px solid;
    border-top: #cccccc 1px solid; 
    border-left: #cccccc 1px solid;
    border-bottom: #B4B4F0 2px solid;
}
.miboton:hover{
    box-shadow:5px 5px 5px #555 inset;
}