Radio by ChristosMourgelas
This radio was created for CSS from the future
#212121
1.radio-input { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5} 6 7.value-radio { 8 display: none; 9} 10 11.value-radio-label { 12 display: flex; 13 align-items: center; 14 gap: 8px; 15 padding: 8px 12px; 16 border: 2px solid #4d4d4d; 17 border-radius: 20px; 18 color: #ccc; 19 background-color: #333; 20 cursor: pointer; 21 transition: all 0.3s; 22} 23 24.value-radio:checked + .value-radio-label { 25 border-color: #00b4ff; 26 background-color: #00b4ff; 27 color: #fff; 28} 29 30.value-radio-label::before { 31 content: ''; 32 display: inline-block; 33 width: 16px; 34 height: 16px; 35 border-radius: 50%; 36 border: 2px solid #4d4d4d; 37 transition: all 1s; 38} 39 40.value-radio:checked + .value-radio-label::before { 41 border-color: #0175a6; 42 background-color: #ffffff; 43}
638 views
638 views
MIT License