.btn{
color: #fff;
font-family: 'Mitr', sans-serif;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 15px;
border-radius: 5px;
border: none;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.35s;
}
.btn:hover,
.btn:focus{
color:#642b73;
}
.btn:before,
.btn:after{
content: "";
height: 100%;
position: absolute;
top: 0;
transition: all 0.3s;
}
.btn:before{
background:#642b73;
width: 100%;
left: 0;
border-radius: 5px;
z-index: -1;
}
.btn:after{
width: 0;
left: 50%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
transform: translate(-50%) translateY(0%);
}
.btn:hover:before{
transform: scale(0, 1);
}
.btn:hover:after{
width: 100%;
border-color: #642b73;
transition-delay: 0.2s;
}
@media only screen and (max-width: 767px){
.btn{ margin-bottom: 30px; }
}