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