.btn-group {
display: grid;
grid-template-columns: repeat(2, 50%);
box-sizing: border-box;
gap: 20px 10px;
width: 90%;
margin: auto;
position: relative;
}
.btn-group label {
display: flex;
align-items: center;
justify-content: center;
line-height: 1.25;
color: #ffffff;
font-size: 22px;
font-weight: 600;
border-radius: 10px;
width: 100%;
min-height: 100px;
transition: 0.25s;
box-sizing: border-box;
position: relative;
z-index: 10;
cursor: pointer;
padding: 0 25px;
text-align: center;
text-decoration: none;
}
.btn-group label::before,
.btn-group label::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
transition: all 0.25s;
}
.btn-group label::before {
background-image: linear-gradient(0deg, #059c0f, #5ee76a 75%);
z-index: 5;
}
.btn-group label::after {
content: "";
display: block;
background-image: none;
background-color: #106a14;
transform: translateY(10px);
z-index: 1;
filter: blur(0px);
}
.btn-group label:hover {
transform: translateY(4px);
}
.btn-group label:hover::after {
transform: translateY(6px);
}
.btn-group input {
display: none;
}
.btn-group input:checked+label {
transform: translateY(4px);
}
.btn-group input:checked+label::before {
background-image: linear-gradient(0deg, #002302, #9f9f9f 55%);
}
.btn-group input:checked+label::after {
transform: translateY(6px);
background-color: #444444;
}
.btn-group .btn-text {
position: relative;
z-index: 10;
}
