This radio was created for futuristic-radio-buttons86 views
CSSAdd prefixes
1.radio-input { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5} 6 7.value-radio { 8 display: none; 9} 10 11.value-radio-label { 12 display: flex; 13 align-items: center; 14 gap: 8px; 15 padding: 8px 12px; 16 border: 2px solid #4d4d4d; 17 border-radius: 20px; 18 color: #ccc; 19 background-color: #333; 20 cursor: pointer; 21 transition: all 0.3s; 22} 23 24.value-radio:checked + .value-radio-label { 25 border-color: #00b4ff; 26 background-color: #00b4ff; 27 color: #fff; 28} 29 30.value-radio-label::before { 31 content: ''; 32 display: inline-block; 33 width: 16px; 34 height: 16px; 35 border-radius: 50%; 36 border: 2px solid #4d4d4d; 37 transition: all 1s; 38} 39 40.value-radio:checked + .value-radio-label::before { 41 border-color: #0175a6; 42 background-color: #ffffff; 43}
HTML
1<div class="radio-input"> 2 <input class="value-radio" name="value-radio" id="option-1" type="radio"> 3 <label class="value-radio-label" for="option-1">Option A</label> 4 5 <input class="value-radio" name="value-radio" id="option-2" type="radio"> 6 <label class="value-radio-label" for="option-2">Option B</label> 7 8 <input class="value-radio" name="value-radio" id="option-3" type="radio"> 9 <label class="value-radio-label" for="option-3">Option C</label> 10 11</div>