CSS
/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body, html {
font-family: montserrat, arial, verdana;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
.btn__start {
display: block;
width: 150px;
height: 50px;
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
background-color: #0ECF54;
border-bottom: 2px solid #12AD4B;
padding-left: 15px;
border-radius: 25px;
}
.btn__start span {
display: inherit;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.btn__start::before {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid #fff;
border-bottom: 5px solid transparent;
top: calc(50% - 5px);
left: 25px;
-webkit-transition: left .3s;
transition: left .3s;
}
.btn__start:hover {
background-color: #16F466;
}
.btn__start:hover span {
-webkit-transform: translateX(150px);
transform: translateX(150px);
}
.btn__start:hover::before {
left: 75px;
}
.btn_animation {
-webkit-animation: pulsescale3d 1.25s infinite;
animation: pulsescale3d 1.25s infinite;
}
@-webkit-keyframes pulsescale3d {
10%, 90% {
-webkit-transform: translate3d(-1px, 0, 0);
transform: translate3d(-1px, 0, 0); }
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 0 0 0 rgba(14, 207, 84, 0.5);
box-shadow: 0 0 0 0 rgba(14, 207, 84, 0.5); }
70% {
-webkit-transform: scale(1);
transform: scale(1); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 0 0 30px rgba(14, 207, 84, 0);
box-shadow: 0 0 0 30px rgba(14, 207, 84, 0); }
}
@keyframes pulsescale3d {
10%, 90% {
-webkit-transform: translate3d(-1px, 0, 0);
transform: translate3d(-1px, 0, 0); }
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 0 0 0 rgba(14, 207, 84, 0.5);
box-shadow: 0 0 0 0 rgba(14, 207, 84, 0.5); }
70% {
-webkit-transform: scale(1);
transform: scale(1); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 0 0 30px rgba(14, 207, 84, 0);
box-shadow: 0 0 0 30px rgba(14, 207, 84, 0); }
}
