پیشنمایش زنده
کد HTML
<div class="radio-input">
<div class="radio-b">
<input type="radio" class="radio-b__input" id="radio1" name="radio-group" />
<label class="radio-b__label" for="radio1">
<div class="radio-b__custom">
<span class="radio-b__custom-fill"></span>
</div>
<span class="radio-b__text">Petit</span>
</label>
</div>
<div class="radio-b">
<input type="radio" class="radio-b__input" id="radio2" name="radio-group" />
<label class="radio-b__label" for="radio2">
<div class="radio-b__custom">
<span class="radio-b__custom-fill"></span>
</div>
<span class="radio-b__text">Grand</span>
</label>
</div>
</div>
کد CSS
.radio-input {
display: flex;
gap: 16px; /* Espace entre les lignes */
}
.radio-b {
display: flex;
align-items: center;
cursor: pointer;
}
.radio-b__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.radio-b__label {
display: flex;
align-items: center;
gap: 12px; /* Espace entre le carré et le texte */
font-size: 15px;
color: #000000;
font-weight: 600;
transition: all 0.3s ease;
}
.radio-b__custom {
position: relative;
width: 26px;
height: 26px;
border: 2px solid #000000;
border-radius: 0%;
transition: all 0.3s ease;
overflow: hidden;
}
.radio-b__custom-fill {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 10px;
background: linear-gradient(
0deg,
rgba(0, 230, 118, 1) 0%,
rgba(255, 215, 0, 1) 100%
);
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.radio-b__input:checked + .radio-b__label .radio-b__custom-fill {
width: 26px;
height: 26px;
transition: all 0.3s ease;
}
.radio-b__input:checked + .radio-b__label .radio-b__custom {
border: none; /* Supprime les bordures noires */
transition: all 0.3s ease; /* Assure une transition fluide */
}
.radio-b__input:hover + .radio-b__label .radio-b__custom {
transform: scale(0.85);
color: linear-gradient(
0deg,
rgba(0, 230, 118, 1) 0%,
rgba(255, 215, 0, 1) 100%
);
}
/* Optionnel : style pour le texte */
.radio-b__text {
font-size: 15px;
color: #000000;
font-weight: 600;
}