Radio by shadowfax29
#e8e8e8
1.radio-inputs { 2 display: flex; 3 flex-wrap: wrap; 4 border-radius: 0.5rem; 5 background-color: rgba(255, 255, 255, 0.074); 6 box-sizing: border-box; 7 box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06); 8 padding: 0.25rem; 9 width: 210px; 10 height: 40px; 11 font-size: 14px; 12 box-size: border-box; 13} 14 15.obj1 { 16 content: ''; 17 position: absolute; 18 width: 100px; 19 height: 100px; 20 filter: blur(4px); 21 z-index: -5; 22 background: linear-gradient(blue,rgb(224, 107, 224)); 23 border-radius: 50%; 24 overflow: hidden; 25} /* adjust position accordingly */ 26 27.obj2 { 28 content: ''; 29 position: absolute; 30 width: 80px; 31 height: 80px; 32 filter: blur(4px); 33 z-index: -5; 34 background: linear-gradient(red,orange); 35 border-radius: 50%; 36} /* adjust position accordingly */ 37 38.obj3 { 39 content: ''; 40 position: absolute; 41 width: 60px; 42 height: 60px; 43 filter: blur(4px); 44 z-index: -5; 45 background-color: grey; 46 border-radius: 50%; 47} /* adjust position accordingly */ 48 49.radio1 , .radio2 , .radio3 { 50 flex: 1; 51 width: 70px; 52 height: 30px; 53} 54 55.radio1 input , 56.radio2 input , 57.radio3 input { 58 width: 30px; 59 height: 30px; 60 appearance: none; 61 z-index: 2; 62 cursor: pointer; 63 margin-left: 22px; 64} 65 66.radio1 .name , 67 68.radio2 .name , 69 70.radio3 .name { 71 display: flex; 72 position: relative; 73 cursor: pointer; 74 align-items: center; 75 justify-content: center; 76 border-radius: 0.5rem; 77 border: none; 78 bottom: 2.6em; 79 padding: .5rem 0; 80 color: rgba(51, 65, 85, 1); 81 transition: all .15s ease-in-out; 82 font-weight: 200; 83 height: 40px; 84 z-index: -2; 85} 86 87.radio1 input:checked ~ .name { 88 color: white; 89 background: linear-gradient(blue,green); 90 font-weight: 600; 91} 92 93.radio2 input:checked ~ .name { 94 color: white; 95 background: linear-gradient(red,orange); 96 font-weight: 600; 97} 98 99.radio3 input:checked ~ .name { 100 color: white; 101 background-color: grey; 102 font-weight: 600; 103} 104 105#one input:checked ~ .obj1, 106#two input:checked ~ .obj2 , 107#three input:checked ~ .obj3 { 108 animation: shake 1s; 109 animation-fill-mode: forwards; 110} 111 112@keyframes shake { 113 0% { 114 transform: translateX(0); 115 } 116 117 10% { 118 transform: translateX(-5px) rotate(-5deg); 119 } 120 121 20% { 122 transform: translateX(5px) rotate(5deg); 123 } 124 125 30% { 126 transform: translateX(-5px) rotate(-5deg); 127 } 128 129 40% { 130 transform: translateX(5px) rotate(5deg); 131 } 132 133 50% { 134 transform: translateX(-5px) rotate(-5deg); 135 } 136 137 60% { 138 transform: translateX(5px) rotate(5deg); 139 } 140 141 70% { 142 transform: translateX(-5px) rotate(-5deg); 143 } 144 145 80% { 146 transform: translateX(5px) rotate(5deg); 147 } 148 149 90% { 150 transform: translateX(-5px) rotate(-5deg); 151 } 152 153 100% { 154 transform: translateX(0) rotate(0); 155 } 156} 157
1.6K views
1.6K views
MIT License