Radio by ozgeozkaraa01
#e8e8e8
1.container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 background-color: #f2f2f2; 6} 7 8.custom-radio { 9 display: flex; 10 flex-direction: column; 11 background-color: #fff; 12 border-radius: 10px; 13 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 14 overflow: hidden; 15} 16 17.custom-radio input[type="radio"] { 18 display: none; 19} 20 21.radio-label { 22 display: flex; 23 align-items: center; 24 padding: 10px 20px; 25 cursor: pointer; 26 transition: background-color 0.3s ease-in-out; 27} 28 29.radio-circle { 30 width: 20px; 31 height: 20px; 32 border: 2px solid #ffcc00; 33 border-radius: 50%; 34 margin-right: 10px; 35 transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; 36} 37 38.radio-text { 39 font-size: 1rem; 40 color: #333; 41 transition: color 0.3s ease-in-out; 42} 43 44.custom-radio input[type="radio"]:checked + .radio-label { 45 background-color: #ffcc00; 46} 47 48.custom-radio input[type="radio"]:checked + .radio-label .radio-circle { 49 border-color: #fff; 50 background-color: #ffcc00; 51} 52 53.custom-radio input[type="radio"]:checked + .radio-label .radio-text { 54 color: #64748b; 55} 56
1K views
1K views
MIT License