JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<a href="" class="cy-button">Задать вопрос</a>
<a href="" class="cy-button-blue">Запланировать поездку</a>

CSS

a{
    margin: 50px !important;}
.cy-button{
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    color: #2e3e4d;
    text-shadow: 1px 1px 1px #fced6c;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0px 2px 2px 0px #606060;
    border: none;
    background: #ffee66; /* Old browsers */
background: -moz-linear-gradient(top,  #ffee66 1%, #ffab23 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffee66), color-stop(100%,#ffab23)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffee66 1%,#ffab23 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffee66 1%,#ffab23 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffee66 1%,#ffab23 100%); /* IE10+ */
background: linear-gradient(top,  #ffee66 1%,#ffab23 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffee66', endColorstr='#ffab23',GradientType=0 ); /* IE6-9 */
cursor: pointer;
}

.cy-button:hover{
    background: #ffce46; /* Old browsers */
background: -moz-linear-gradient(top,  #ffce46 0%, #ffee66 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffce46), color-stop(100%,#ffee66)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffce46 0%,#ffee66 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffce46 0%,#ffee66 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffce46 0%,#ffee66 100%); /* IE10+ */
background: linear-gradient(top,  #ffce46 0%,#ffee66 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffce46', endColorstr='#ffee66',GradientType=0 ); /* IE6-9 */
}

.cy-button:active{
    top: 2px;
    background: #ffce46; /* Old browsers */
background: -moz-linear-gradient(top,  #ffce46 0%, #ffee66 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,...