402 views
1.wrapper { 2 --font-color-dark: #323232; 3 --font-color-light: #FFF; 4 --bg-color: #fff; 5 --main-color: #323232; 6 position: relative; 7 width: 250px; 8 height: 36px; 9 background-color: var(--bg-color); 10 border: 2px solid var(--main-color); 11 border-radius: 34px; 12 display: flex; 13 flex-direction: row; 14 box-shadow: 4px 4px var(--main-color); 15} 16 17.option { 18 width: 80.5px; 19 height: 28px; 20 position: relative; 21 top: 2px; 22 left: 2px; 23} 24 25.input { 26 width: 100%; 27 height: 100%; 28 position: absolute; 29 left: 0; 30 top: 0; 31 appearance: none; 32 cursor: pointer; 33} 34 35.btn { 36 width: 100%; 37 height: 100%; 38 background-color: var(--bg-color); 39 border-radius: 50px; 40 display: flex; 41 justify-content: center; 42 align-items: center; 43} 44 45.span { 46 color: var(--font-color-dark); 47} 48 49.input:checked + .btn { 50 background-color: var(--main-color); 51} 52 53.input:checked + .btn .span { 54 color: var(--font-color-light); 55}
MIT License