Radio by gharsh11032000
#212121
1.radio-buttons-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: 16px; 26 color: #fff; 27 cursor: pointer; 28 transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1); 29} 30 31.radio-button__custom { 32 position: absolute; 33 top: 50%; 34 left: 0; 35 transform: translateY(-50%); 36 width: 20px; 37 height: 20px; 38 border-radius: 50%; 39 border: 2px solid #555; 40 transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1); 41} 42 43.radio-button__input:checked + .radio-button__label .radio-button__custom { 44 transform: translateY(-50%) scale(0.9); 45 border: 5px solid #4c8bf5; 46 color: #4c8bf5; 47} 48 49.radio-button__input:checked + .radio-button__label { 50 color: #4c8bf5; 51} 52 53.radio-button__label:hover .radio-button__custom { 54 transform: translateY(-50%) scale(1.2); 55 border-color: #4c8bf5; 56 box-shadow: 0 0 10px #4c8bf580; 57} 58 59
3.2K views
3.2K views
MIT License