.btn{
color: #ad5389;
font-family:'Archivo', sans-serif;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 15px;
border-radius: 0;
border: none;
position: relative;
z-index: 1;
transition: 0.3s ease-in-out;
}
.btn:hover{ color: #3c1053; }
.btn:before,
.btn:after,
.btn span:before,
.btn span:after{
content: '';
width: 10px;
height: 10px;
opacity: 0;
position: absolute;
transition: 0.7s;
}
.btn:before{
border-top: 3px solid #3c1053;
border-left: 3px solid #3c1053;
top: -0.5px;
left: -0.5px;
}
.btn:after{
border-top: 3px solid #3c1053;
border-right: 3px solid #3c1053;
top: -0.5px;
right: -0.5px;
}
.btn span:before{
border-bottom: 3px solid #3c1053;
border-left: 3px solid #3c1053;
bottom: -0.5px;
left: -0.5px;
}
.btn span:after{
border-bottom: 3px solid #3c1053;
border-right: 3px solid #3c1053;
bottom: -0.5px;
right: -0.5px;
}
.btn:hover:before,
.btn:hover:after,
.btn:hover span:before,
.btn:hover span:after{
opacity: 1;
transform: translateX(0%) translateY(0%);
}
@media only screen and (max-width: 767px){
.btn{ margin-bottom: 30px; }
}