.btn{
color: #fff;
background: #000;
font-family: 'Tilt Neon', sans-serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 5px 15px 5.5px;
border-radius: 0;
border: none;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.btn:hover,
.btn:focus{
color: #fff;
}
.btn span{
transition: all 0.3s ease 0s;
display: block;
}
.btn:hover span{
transform-origin: left center;
transform: scale(0.85) translateX(-5px);
}
.btn:before{
content: '';
height: 15px;
width: 15px;
border: 2px dashed #fff;
border-radius: 50%;
opacity: 0;
transform: translateY(-50%);
position: absolute;
right: 10px;
top: 49%;
z-index: -1;
transition: all 0.3s ease 0s;
}
.btn:hover:before{
opacity: 1;
animation: rotateAnimate 0.5s linear infinite;
}
@keyframes rotateAnimate{
100%{ transform: translateY(-50%) rotate(360deg); }
}
@media only screen and (max-width: 767px){
.btn{ margin-bottom: 30px; }
}