583 views
1.radio-button { 2 display: flex; 3 gap: 10px; 4 justify-content: center; 5 margin: 10px; 6 position: relative; 7 align-items: center; 8} 9 10.radio-button input[type="radio"] { 11 position: absolute; 12 opacity: 0; 13} 14 15.radio { 16 position: relative; 17 display: inline-block; 18 width: 24px; 19 height: 24px; 20 border-radius: 50%; 21 border: 2px solid #ccc; 22 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); 23 transform: translateZ(-25px); 24 transition: all 0.3s ease-in-out; 25} 26 27.radio::before { 28 position: absolute; 29 content: ''; 30 width: 10px; 31 height: 10px; 32 top: 5px; 33 left: 5px; 34 border-radius: 50%; 35 background-color: #fff; 36 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 37 opacity: 0; 38 transition: all 0.3s ease-in-out; 39} 40 41.radio-button input[type="radio"]:checked + .radio { 42 border-color: #5cb85c; 43 transform: translateZ(0px); 44 background-color: #fff; 45} 46 47.radio-button input[type="radio"]:checked + .radio::before { 48 opacity: 1; 49} 50
MIT License