.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; }
}