Radio by SlowLess0
This radio was created for CSS from the future
#212121
1.rad-label { 2 display: flex; 3 padding: 14px 16px; 4 margin: 10px 0; 5 border-radius: 100px; 6 cursor: pointer; 7 transition: 0.3s; 8} 9 10.rad-label:hover, .rad-label:focus-within { 11 background: hsla(0, 0%, 40%, .14); 12} 13 14.rad-input { 15 position: absolute; 16 left: 0; 17 top: 0; 18 width: 1px; 19 height: 1px; 20 opacity: 0; 21 z-index: -1; 22} 23 24.rad-design { 25 width: 22px; 26 height: 22px; 27 border-radius: 100px; 28 background: linear-gradient(to right bottom, hsl(172, 97%, 62%), hsl(251, 97%, 62%)); 29 position: relative; 30} 31 32.rad-design::before { 33 content: ''; 34 display: inline-block; 35 width: inherit; 36 height: inherit; 37 border-radius: inherit; 38 background: hsl(0, 0%, 80%); 39 transform: scale(1.1); 40 transition: .3s; 41} 42 43.rad-input:checked+.rad-design::before { 44 transform: scale(0); 45} 46 47.rad-text { 48 color: hsl(0, 0%, 60%); 49 margin-left: 14px; 50 letter-spacing: 3px; 51 text-transform: uppercase; 52 font-size: 18px; 53 font-weight: 900; 54 transition: .3s; 55} 56 57.rad-input:checked~.rad-text { 58 color: hsl(0, 0%, 40%); 59}
606 views
606 views
MIT License