Radio by LightAndy1
#212121
1.wrapper { 2 --font-color-dark: #bebfc5; 3 --font-color-light: #bebfc5; 4 --bg-color: #212121; 5 --main-color: #0c0c0c; 6 --secondary-color: #141414; 7 position: relative; 8 width: 250px; 9 height: 36px; 10 background-color: var(--bg-color); 11 border: 2px solid var(--main-color); 12 border-radius: 34px; 13 display: flex; 14 flex-direction: row; 15 box-shadow: 4px 4px var(--main-color); 16} 17 18.option { 19 margin-right: 5px; 20 width: 80.5px; 21 height: 28px; 22 position: relative; 23 top: 2px; 24 left: 2px; 25 border-radius: 34px; 26 transition: 0.25s cubic-bezier(0, 0, 0, 1); 27} 28 29.option:last-child { 30 margin-right: 4px; 31} 32 33.option:hover { 34 background-color: var(--secondary-color); 35} 36 37.option:hover .span { 38 color: var(--font-color-light); 39} 40 41.input { 42 width: 100%; 43 height: 100%; 44 position: absolute; 45 left: 0; 46 top: 0; 47 appearance: none; 48 cursor: pointer; 49} 50 51.btn { 52 width: 100%; 53 height: 100%; 54 border-radius: 50px; 55 display: flex; 56 justify-content: center; 57 align-items: center; 58} 59 60.span { 61 color: var(--font-color-dark); 62} 63 64.input:checked + .btn { 65 background-color: var(--main-color); 66 transition: 0.2s cubic-bezier(0, 0, 0, 1); 67} 68 69.input:checked + .btn .span { 70 color: var(--font-color-light); 71 transition: 0.25s cubic-bezier(0, 0, 0, 1); 72} 73
287 views
Variation of aradio
MIT License