JSFiddle - React, Tailwind, and code Playground
HTML
<div class="cominet_rulton">
<a href="#" class="rsakiopib">COMINET.ML</a>
</div>
SCSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #00A388;
padding: 60px;
}
// Fonts
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
h1{
margin: 50px 0;
color: #fff;
font-family: 'Indie Flower', cursive;
font-size: 48px;
font-weight: normal;
text-align: center;
}
// Button
.cominet_rultonr{
position: absolute;
left: 50%;
margin: 0 0 100px -150px;
}
.rsakiopib{
width: 300px;
height: 50px;
line-height: 50px;
background-color: #3853ff;
border-radius: 8px;
color: #fff;
font-family: 'Indie Flower', cursive;
font-size: 22px;
font-weight: normal;
text-decoration: none;
text-align: center;
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-animation-name: hover;
animation-name: hover;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
&:before{
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
...