Radio by Smit-Prajapati
#080808
1.radio-container { 2 --main-color: #f7e479; 3 --main-color-opacity: #f7e4791c; 4 5 /* change this according inputs count */ 6 --total-radio: 3; 7 8 display: flex; 9 flex-direction: column; 10 position: relative; 11 padding-left: 0.5rem; 12} 13.radio-container input { 14 cursor: pointer; 15 appearance: none; 16} 17.radio-container .glider-container { 18 position: absolute; 19 left: 0; 20 top: 0; 21 bottom: 0; 22 background: linear-gradient( 23 0deg, 24 rgba(0, 0, 0, 0) 0%, 25 rgba(27, 27, 27, 1) 50%, 26 rgba(0, 0, 0, 0) 100% 27 ); 28 width: 1px; 29} 30.radio-container .glider-container .glider { 31 position: relative; 32 height: calc(100% / var(--total-radio)); 33 width: 100%; 34 background: linear-gradient( 35 0deg, 36 rgba(0, 0, 0, 0) 0%, 37 var(--main-color) 50%, 38 rgba(0, 0, 0, 0) 100% 39 ); 40 transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56); 41} 42.radio-container .glider-container .glider::before { 43 content: ""; 44 position: absolute; 45 height: 60%; 46 width: 300%; 47 top: 50%; 48 transform: translateY(-50%); 49 background: var(--main-color); 50 filter: blur(10px); 51} 52.radio-container .glider-container .glider::after { 53 content: ""; 54 position: absolute; 55 left: 0; 56 height: 100%; 57 width: 150px; 58 background: linear-gradient( 59 90deg, 60 var(--main-color-opacity) 0%, 61 rgba(0, 0, 0, 0) 100% 62 ); 63} 64.radio-container label { 65 cursor: pointer; 66 padding: 1rem; 67 position: relative; 68 color: grey; 69 transition: all 0.3s ease-in-out; 70} 71 72.radio-container input:checked + label { 73 color: var(--main-color); 74} 75 76.radio-container input:nth-of-type(1):checked ~ .glider-container .glider { 77 transform: translateY(0); 78} 79 80.radio-container input:nth-of-type(2):checked ~ .glider-container .glider { 81 transform: translateY(100%); 82} 83 84.radio-container input:nth-of-type(3):checked ~ .glider-container .glider { 85 transform: translateY(200%); 86} 87 88.radio-container input:nth-of-type(4):checked ~ .glider-container .glider { 89 transform: translateY(300%); 90} 91 92.radio-container input:nth-of-type(5):checked ~ .glider-container .glider { 93 transform: translateY(400%); 94} 95 96.radio-container input:nth-of-type(6):checked ~ .glider-container .glider { 97 transform: translateY(500%); 98} 99 100.radio-container input:nth-of-type(7):checked ~ .glider-container .glider { 101 transform: translateY(600%); 102} 103 104.radio-container input:nth-of-type(8):checked ~ .glider-container .glider { 105 transform: translateY(700%); 106} 107 108.radio-container input:nth-of-type(9):checked ~ .glider-container .glider { 109 transform: translateY(800%); 110} 111 112.radio-container input:nth-of-type(10):checked ~ .glider-container .glider { 113 transform: translateY(900%); 114} 115
3.1K views
MIT License