JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<button class="zagtukolas_vizoran" type="button">
  <span>Сайт ZorNet.Ru про uCoz</span>
</button>

CSS

body{
  box-sizing: border-box;
  font-size: 1em;
  font-weight: lighter;
}




.zagtukolas_vizoran {
    position: relative;
    display: block;
    margin: 95px auto;
    padding: 0;
    border-radius: 53px;
    overflow: hidden;
    border-width: 0;
    outline: none;
    background-color: #1c86a0;
    color: #f7ebeb;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.04, 0.96);
    border: 2.5px solid #e9edf3;
    box-shadow: 0px 5px 17px 1px rgba(62, 58, 58, 0.19), 1px 3px 30px 1px rgba(35, 32, 32, 0.33);
}

.zagtukolas_vizoran span {
    position: relative;
    display: block;
    padding: 15.3px 35px;
    font-size: 1.2rem;
}

.zagtukolas_vizoran:before {
  content: '';
  position: absolute;
  display: block;
  top: 47%;
  left: 47%;
  width: 0;
  padding-top: 0;
  background-color: #00CCFF;
  border-radius: 97%;
  -webkit-transform: translate(-49%, -49%);
      -ms-transform: translate(-49%, -49%);
          transform: translate(-49%, -49%);
}

.zagtukolas_vizoran:hover, .zagtukolas_vizoran:focus {
    cursor: pointer;
    background-color: #18a3c5;
}

.zagtukolas_vizoran:active:before {
  width: 119%;
  padding-top: 119%; 
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}