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