JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<a href="javascript:void(0)" class="btn btn-motive">Кнопка</a>

CSS

*{margin: 5%;}
a{text-decoration:none}


button, button:hover, button:focus, button:active, .btn {
    outline: medium none !important;
    outline-offset: 0;
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    animation-duration: .2s;
    border-color: -moz-use-text-color;
    border-image: none;
  
    border-style: none none solid;
    border-width: medium medium .1em;
  font-size:1em;
    color: #ffffff;
    display: inline-block;
    line-height: 1em;
    padding: .3em;
    position: relative;
    text-transform: uppercase;
    transform: translateZ(0px);
    transition-duration: 0.3s;
}


.btn:before:hover {
    transition-duration: 0.2s;
   
}

.btn:before {
    border: .2em solid;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition-duration: 0.3s;
    transition-property: top, right, bottom, left;
       border-radius:3px;
}
.btn:before {
    bottom: -8px;
    left:  -8px;
    right:  -8px;
    top:  -8px;
}
.btn:hover:before {
    bottom: -8px;
    left: -8px;
    right: -8px;
    top: -8px;
    border-color:lightgreen;
}

.btn:active:before {
    bottom: -2px;
    left: -2px;
    right: -2px;
    top: -2px;
}

.btn-motive, .btn-motive:disabled {
    background-color: #1f8bf3;
    
}
.btn-motive:hover, .btn-motive:disabled:hover, .btn-motive:active, .btn-motive:disabled:active, .btn-motive:focus, .btn-motive:disabled:focus {
    background-color: #1f8bf3;
   
}
.btn-motive:before:hover, .btn-motive:disabled:hover, .btn-motive:active, .btn-motive:disabled:active, .btn-motive:focus, .btn-motive:disabled:focus {
    background-color: #1f8bf3;
    border-color: lightblue;
}
.btn-motive:before, .btn-motive:disabled:before {
    border-color: #1f8bf3;
}