پیشنمایش زنده
کد HTML
<div class="radio-container">
<input type="radio" id="radio-on" name="toggle" class="radio-input" />
<label for="radio-on" class="radio">
<span class="circle"></span>
</label>
<input type="radio" id="radio-off" name="toggle" class="radio-input" />
<label for="radio-off" class="radio">
<span class="circle"></span>
</label>
</div>
کد CSS
/* Radio Container */
.radio-container {
display: flex;
gap: 15px;
justify-content: center;
align-items: center;
}
/* Hidden Radio Input */
.radio-input {
display: none;
}
/* Radio Label */
.radio {
position: relative;
width: 32px;
height: 32px;
padding: 6px;
background: #e0e0e0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition:
background-color 0.3s ease-in-out,
box-shadow 0.3s ease-in-out;
box-shadow:
inset -1px -2px 7px #ffffff,
inset 1px 2px 4px #b0b0b0;
}
/* Focus Outline */
.radio:focus {
outline: 1px solid #4b0082;
}
/* Inner Circle */
.circle {
width: 100%;
height: 100%;
background: transparent;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.radio-input:checked + .radio .circle {
background: #c1d6a7;
border: 2px solid #ffffff00;
transform: scale(1.1);
outline: 3px solid #f2f3f4;
}