:root{
--white: #fff;
--color1:#e5719f;
--background: #ff006a;
}
.btn{
color: var(--color1);
background: var(--background);
font-family: "Rubik", sans-serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 0;
border: none;
overflow: hidden;
position: relative;
transition: all 0.3s ease-in-out;
}
.btn:hover{ color:var(--color1); }
.btn:before,
.btn:after{
content:attr(data-hover);
color: var(--white);
padding: 4px 14px;
transform: rotate(-90deg);
transform-origin: top left;
position: absolute;
top:0;
left:0;
transition: all 0.5s ease-in-out;
}
.btn:after{ transform-origin: bottom right; }
.btn:hover:before,
.btn:hover:after{ transform: rotate(0deg); }
@media only screen and (max-width: 767px){
.btn{ margin-bottom: 30px; }
}