JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a class="gesarveremplon_css  simply_animation" href="#">Сделать красивые гиперссылки с помощью CSS</a>

CSS

a.gesarveremplon_css {
    display: inline-block;
    padding: 28px 53px;
    border: 2px solid #fafdf7;
    background: #287790;
    color: #e6dddd;
    font-size: 21px;
    text-align: center;
    text-shadow: 0.5px 0.5px 0px #63635d;
    filter: dropshadow(color=#9c9e98, offx=1, offy=1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: -1px 4px 8px 1px #a5a7a1;
    -moz-box-shadow: -1px 4px 8px 1px #989f8e;
    box-shadow: -1px 3px 7px 2px #676963;
}


a.gesarveremplon_css:hover, a.gesarveremplon_css:focus {
        background: #08485d;
	color: #d8cf58;
	-webkit-transition: all 0.3s ease-in;
  	-moz-transition: all 0.3s ease-in;
         transition: all 0.3s ease-in;
}




@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.1);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-ms-keyframes pulse {
  0% {
    -ms-transform: scale(1);
  }
  50% {
    -ms-transform: scale(1.1);
  }
  100% {
    -ms-transform: scale(1);
  }
}
@-o-keyframes pulse {
  0% {
    -o-transform: scale(1);
  }
  50% {
    -o-transform: scale(1.1);
  }
  100% {
    -o-transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}



/* transform */
.gesarveremplon_css:hover, .gesarveremplon_css:focus {
  -moz-transform: scale(0.95) rotate(10deg) translate(25px);
  -webkit-transform: scale(0.95) rotate(10deg) translate(25px);
  -o-transform: scale(0.95) rotate(10deg) translate(25px);
  transform: scale(0.95) rotate(10deg) translate(25px);
}