#e8e8e8
1.toggle > div { 2 position: relative; 3 padding: 10px; 4 width: 150px; 5 height: 75px; 6 border-radius: 50px; 7 box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .5), 0px 1px 1px 0 rgba(255, 255, 255, 1); 8 background: rgb(189, 191, 193); 9 background: linear-gradient(to bottom, rgba(189, 191, 193, 1) 0%, rgba(249, 251, 254, 1) 100%); 10} 11 12.toggle > div > input[type=checkbox] { 13 position: absolute; 14 opacity: 0; 15 top: -3px; 16 left: 17px; 17 width: 130px; 18 height: 55px; 19 z-index: 5; 20} 21 22.toggle > div > input[type=checkbox] ~ div { 23 width: 130px; 24 height: 55px; 25 border-radius: 50px; 26 border: 1px solid #979797; 27 box-shadow: inset 5px 0 0 0 rgba(0, 0, 0, .1), inset -5px 0 0 0 rgba(0, 0, 0, .1), inset -6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5); 28 background: rgb(253, 252, 251); 29 background: linear-gradient(to right, rgba(253, 252, 251, 1) 37%, rgba(229, 229, 229, 1) 61%); 30} 31 32.toggle > div > input[type=checkbox]:checked ~ div { 33 box-shadow: inset -5px 0 0 0 rgba(0, 0, 0, .1), inset 5px 0 0 0 rgba(0, 0, 0, .1), inset 6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5); 34 background: rgb(229, 229, 229); 35 background: linear-gradient(to right, rgba(229, 229, 229, 1) 39%, rgba(253, 252, 251, 1) 63%); 36} 37 38.toggle > div > input[type=checkbox] ~ div:before { 39 content: attr(data-unchecked); 40 display: block; 41 position: absolute; 42 border-radius: 10px; 43 top: 27px; 44 left: 30px; 45} 46 47.toggle > div > input[type=checkbox] ~ div:after { 48 content: attr(data-checked); 49 color: #df0000; 50 text-shadow: 0 1px 0 #fff, 0px 0 7px #df0000; 51 filter: dropshadow(color=#df0000, offx=0, offy=0); 52 display: block; 53 position: absolute; 54 border-radius: 10px; 55 top: 27px; 56 left: 100px; 57} 58 59.toggle > div > input[type=checkbox]:checked ~ div:before { 60 color: #119400; 61 text-shadow: 0 1px 0 #fff, 0px 0 7px #007a08; 62 filter: dropshadow(color=#007a08, offx=0, offy=0); 63} 64 65.toggle > div > input[type=checkbox]:checked ~ div:after { 66 color: #000; 67 text-shadow: none; 68 filter: dropshadow(none); 69} 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
2K views
2K views
Comments
MIT License