This post is saved as a draft.
#212121
1.radio-button-container { 2 display: flex; 3 align-items: center; 4 gap: 24px; 5} 6 7.radio-button { 8 display: inline-block; 9 position: relative; 10 cursor: pointer; 11} 12 13.radio-button__input { 14 position: absolute; 15 opacity: 0; 16 width: 0; 17 height: 0; 18} 19 20.radio-button__label { 21 display: inline-block; 22 padding-left: 30px; 23 margin-bottom: 10px; 24 position: relative; 25 font-size: 15px; 26 color: #f2f2f2; 27 font-weight: 600; 28 cursor: pointer; 29 text-transform: uppercase; 30 transition: all 0.3s ease; 31} 32 33.radio-button__custom { 34 position: absolute; 35 top: 0; 36 left: 0; 37 width: 20px; 38 height: 20px; 39 border-radius: 50%; 40 border: 2px solid #555; 41 transition: all 0.3s ease; 42} 43 44.radio-button__input:checked + .radio-button__label .radio-button__custom { 45 background-color: #4c8bf5; 46 border-color: transparent; 47 transform: scale(0.8); 48 box-shadow: 0 0 20px #4c8bf580; 49} 50 51.radio-button__input:checked + .radio-button__label { 52 color: #4c8bf5; 53} 54 55.radio-button__label:hover .radio-button__custom { 56 transform: scale(1.2); 57 border-color: #4c8bf5; 58 box-shadow: 0 0 20px #4c8bf580; 59} 60 61 62 63 64 65
Variation of aradio
Variation of aradio