#e8e8e8
1#switch { 2 visibility: hidden; 3 clip: rect(0 0 0 0); 4 position: absolute; 5 left: 9999px; 6} 7 8.switch { 9 display: block; 10 width: 130px; 11 height: 60px; 12 margin: 70px auto; 13 position: relative; 14 background: #ced8da; 15 background: linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); 16 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 ); 17 transition: all 0.2s ease-out; 18 cursor: pointer; 19 border-radius: 0.35em; 20 box-shadow: 0 0 1px 2px rgba(0,0,0,0.7), 21 inset 0 2px 0 rgba(255,255,255,0.6), 22 inset 0 -1px 0 1px rgba(0,0,0,0.3), 23 0 8px 10px rgba(0,0,0,0.15); 24} 25 26.switch:before { 27 display: block; 28 position: absolute; 29 left: -35px; 30 right: -35px; 31 top: -25px; 32 bottom: -25px; 33 z-index: -2; 34 content: ""; 35 border-radius: 0.4em; 36 background: #d5dde0; 37 background: linear-gradient(#d7dfe2, #bcc7cd); 38 box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 39 inset 0 -1px 1px 1px rgba(0,0,0,0.3), 40 0 0 8px 2px rgba(0,0,0,0.2), 41 0 2px 4px 2px rgba(0,0,0,0.1); 42 pointer-events: none; 43 transition: all 0.2s ease-out; 44} 45 46.switch:after { 47 content: ""; 48 position: absolute; 49 right: -25px; 50 top: 50%; 51 width: 16px; 52 height: 16px; 53 border-radius: 50%; 54 background: #788b91; 55 margin-top: -8px; 56 z-index: -1; 57 box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7), 58 inset 0 -2px 2px rgba(0,0,0,0.2), 59 0 1px 0 white, 60 0 -1px 0 rgba(0,0,0,0.5), 61 -47px 32px 15px 13px rgba(0,0,0,0.25); 62} 63 64#switch:checked ~ .switch { 65 background: #b7bfc2; 66 background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); 67 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 ); 68} 69 70#switch:checked ~ .switch:after { 71 background: #b1ffff; 72 box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7), 73 inset 0 -2px 2px rgba(0,0,0,0.2), 74 0 1px 0 white, 75 0 -1px 0 rgba(0,0,0,0.5), 76 -110px 32px 15px 13px rgba(0,0,0,0.25); 77}
Comments
MIT License