.demo{ background: #e8e8e8; }
:root{
--white: #fff;
--color: #008542;
}
.btn{
color: var(--white);
background: var(--color);
font-family: "Madimi One", sans-serif;
font-size: 24px;
font-weight: 300;
text-transform: capitalize;
letter-spacing: 1px;
padding: 6px 14px;
border-radius: 0;
text-shadow: 0 2px 0 rgb(0 0 0 / 25%);
position: relative;
z-index: 1;
transition: all 0.5s ease-in-out;
}
.btn:hover{ color: var(--white); }
.btn:before,
.btn:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
}
.btn:before {
background: var(--color);
box-shadow: 0 -4px rgb(21 108 0 / 50%) inset,0 4px rgb(100 253 31 / 99%) inset,
-4px 0 rgb(100 253 31 / 50%) inset, 4px 0 rgb(21 108 0 / 50%) inset;
z-index: -1;
}
.btn:after {
box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
}
.btn:hover:before {
box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset,
-4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;
}
.btn:hover:after {
box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
}
@media only screen and (max-width: 767px){
.btn{ margin-bottom: 30px; }
}