:root{
--white:#fff;
--background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636);
}
.demo{ background: #DDDDDD; }
.btn{
color: var(--white);
background: var(--background);
font-family: "Lilita One", sans-serif;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
padding: 8px 16px;
border-radius: 50px 50px;
border: 2px solid var(--white);
position: relative;
overflow: hidden;
margin: 0 10px;
transition: all 0.3s ease-in-out;
z-index: 1;
}
.btn:hover,
.btn:focus{
color: var(--white);
background-color: var(--color);
transform: translateY(-3px);
}
.btn:before,
.btn:after {
content: "";
width: 100%;
height: 100%;
opacity: 0.3;
position: absolute;
top: 0;
transition: all 0.3s ease-in-out;
z-index: -1;
}
.btn:before {
background: var(--background);
left: 100%;
}
.btn:hover:before {
transform: translateX(-50%);
opacity: 1;
}
.btn:after {
background: var(--background);
right: 100%;
}
.btn:hover:after {
transform: translateX(50%);
opacity: 1;
}
@media only screen and (max-width: 767px){
.btn{ margin-bottom: 30px; }
}