JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="btn">Кнопка</a>

CSS

.btn{
background: rgb(30,87,153);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 50%);
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 50%);
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
background-size: 100% 200%;
    width: 100%;
    max-width: 240px;
   margin: 40px auto;
   display: block;
   padding: 14px 28px;
   font-size: 24px;
   color: #fff;
   text-align: center;
   text-transform: uppercase;
   text-decoration: none;
   transition: all .4s linear;
   -webkit-transition: all .4s linear;
   -moz-transition: all .4s linear;
   -ms-transition: all .4s linear;
   -o-transition: all .4s linear;
   cursor: pointer;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   -ms-border-radius: 2px;
   -o-border-radius: 2px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
}

.btn:hover{
background-size: 100% 100%;
   text-decoration: none;
}