1K views
1.radio-container { 2 margin: 0 auto; 3 max-width: 300px; 4} 5 6.radio-wrapper { 7 margin-bottom: 20px; 8} 9 10.radio-button { 11 display: flex; 12 align-items: center; 13 cursor: pointer; 14 transition: all 0.2s ease-in-out; 15} 16 17.radio-button:hover { 18 transform: translateY(-2px); 19} 20 21.radio-button input[type="radio"] { 22 display: none; 23} 24 25.radio-checkmark { 26 display: inline-block; 27 position: relative; 28 width: 16px; 29 height: 16px; 30 margin-right: 10px; 31 border: 2px solid #333; 32 border-radius: 50%; 33} 34 35.radio-checkmark:before { 36 content: ""; 37 position: absolute; 38 top: 50%; 39 left: 50%; 40 transform: translate(-50%, -50%) scale(0); 41 width: 8px; 42 height: 8px; 43 border-radius: 50%; 44 background-color: #333; 45 transition: all 0.2s ease-in-out; 46} 47 48.radio-button input[type="radio"]:checked ~ .radio-checkmark:before { 49 transform: translate(-50%, -50%) scale(1); 50} 51 52.radio-label { 53 font-size: 16px; 54 font-weight: 600; 55} 56
JkHuger
JkHuger
MIT License