.radio-btn-group {
--background: #ffffff;
--text: #414856;
--radio: #7C96B2;
--theme-clr: #FF9800;
--radio-size: 20px;
--border-radius: 10px;
background: var(--background);
border-radius: var(--border-radius);
color: var(--text);
position: relative;
box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin:10% auto 0px auto;
max-width: 500px;
}
.radio-btn-group h3 {
font-size: 20px;
font-weight: 600;
margin: 15px 0px
}
.radio-item {
position: relative;
margin: 20px 0px;
width: 100%;
}
.radio-btn-group label {
cursor: pointer;
padding-left: 30px;
}
.radio-btn-group input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
position: absolute;
height: var(--radio-size);
width: var(--radio-size);
outline: none;
margin: 0;
cursor: pointer;
border: 2px solid var(--radio);
background: transparent;
border-radius: 50%;
display: grid;
justify-self: end;
justify-items: center;
align-items: center;
overflow: hidden;
transition: border 0.5s ease;
}
.radio-btn-group input[type=radio]::before, .radio-btn-group input[type=radio]::after {
content: "";
display: flex;
justify-self: center;
border-radius: 50%;
}
.radio-btn-group input[type=radio]::before {
position: absolute;
width: 100%;
height: 100%;
background: var(--background);
z-index: 1;
opacity: var(--opacity, 1);
}
.radio-btn-group input[type=radio]::after {
position: relative;
width: calc(100% /2);
height: calc(100% /2);
background: var(--theme-clr);
top: var(--y, 100%);
transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
}
.radio-btn-group input[type=radio]:checked {
--radio: var(--theme-clr);
}
.radio-btn-group input[type=radio]:checked::after {
--y: 0%;
-webkit-animation: stretch-animate 0.3s ease-out 0.17s;
animation: stretch-animate 0.3s ease-out 0.17s;
}
.radio-btn-group input[type=radio]:checked::before {
--opacity: 0;
}
.radio-btn-group input[type=radio]:checked ~ input[type=radio]::after {
--y: -100%;
}
.radio-btn-group input[type=radio]:not(:checked)::before {
--opacity: 1;
transition: opacity 0s linear 0.5s;
}
.radio-btn-group input[type=radio]:checked + label {
color: var(--theme-clr)
}
@-webkit-keyframes stretch-animate {
0% {
transform: scale(1, 1);
}
28% {
transform: scale(1.15, 0.85);
}
50% {
transform: scale(0.9, 1.1);
}
100% {
transform: scale(1, 1);
}
}
@keyframes stretch-animate {
0% {
transform: scale(1, 1);
}
28% {
transform: scale(1.15, 0.85);
}
50% {
transform: scale(0.9, 1.1);
}
100% {
transform: scale(1, 1);
}
}