Radio by neerajbaniwal
#e8e8e8
1.radiogroup { 2 padding: 48px 64px; 3 border-radius: 16px; 4 background: #ecf0f3; 5 box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset; 6} 7 8.wrapper { 9 margin: 8px 0; 10} 11 12.state { 13 position: absolute; 14 top: 0; 15 right: 0; 16 opacity: 1e-5; 17 pointer-events: none; 18} 19 20.label { 21 display: inline-flex; 22 align-items: center; 23 cursor: pointer; 24 color: #394a56; 25} 26 27.text { 28 margin-left: 16px; 29 opacity: 0.6; 30 transition: opacity 0.2s linear, transform 0.2s ease-out; 31} 32 33.indicator { 34 position: relative; 35 border-radius: 50%; 36 height: 30px; 37 width: 30px; 38 box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6; 39 overflow: hidden; 40} 41 42.indicator::before, 43.indicator::after { 44 content: ""; 45 position: absolute; 46 top: 10%; 47 left: 10%; 48 height: 80%; 49 width: 80%; 50 border-radius: 50%; 51} 52 53.indicator::before { 54 box-shadow: -4px -2px 4px 0px #d1d9e6, 4px 2px 8px 0px #fff; 55} 56 57.indicator::after { 58 background-color: #ecf0f3; 59 box-shadow: -4px -2px 4px 0px #fff, 4px 2px 8px 0px #d1d9e6; 60 transform: scale3d(1, 1, 1); 61 transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; 62} 63 64.state:checked ~ .label .indicator::after { 65 transform: scale3d(0.975, 0.975, 1) translate3d(0, 10%, 0); 66 opacity: 0; 67} 68 69.state:focus ~ .label .text { 70 transform: translate3d(8px, 0, 0); 71 opacity: 1; 72} 73 74.label:hover .text { 75 opacity: 1; 76} 77
298 views
298 views
MIT License