Switch by vikramsinghnegi
#e8e8e8
1.switch { 2 position: relative; 3 margin: 25px 20px; 4} 5 6.switch input { 7 top: 0; 8 right: 0; 9 bottom: 0; 10 left: 0; 11 opacity: 0; 12 z-index: 100; 13 position: absolute; 14 width: 100%; 15 height: 100%; 16 cursor: pointer; 17} 18 19.switch.demo3 { 20 width: 180px; 21 height: 50px; 22} 23 24.switch.demo3 label { 25 display: block; 26 width: 100%; 27 height: 100%; 28 background: #d8ba5f; 29 border-radius: 50px; 30 box-shadow: inset 0 4px 8px 2px rgba(248, 6, 6, 0.2), 31 0 1px 0 rgba(255, 255, 255, 0.5); 32} 33 34.switch.demo3 label:after { 35 content: ""; 36 position: absolute; 37 z-index: -1; 38 top: -8px; 39 right: -8px; 40 bottom: -8px; 41 left: -8px; 42 border-radius: inherit; 43 background: #ababab; 44 background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab)); 45 background: -webkit-linear-gradient(#f2f2f2, #ababab); 46 background: linear-gradient(#f2f2f2, #ababab); 47 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25); 48} 49 50.switch.demo3 label:before { 51 content: ""; 52 position: absolute; 53 z-index: -1; 54 top: -18px; 55 right: -18px; 56 bottom: -18px; 57 left: -18px; 58 border-radius: inherit; 59 background: #eee; 60 background: linear-gradient(#e5e7e6, #eee); 61 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 62 filter: blur(1px); 63} 64 65.switch.demo3 label i { 66 display: block; 67 height: 100%; 68 width: 60%; 69 border-radius: inherit; 70 background: silver; 71 position: absolute; 72 z-index: 2; 73 right: 40%; 74 top: 0; 75 background: #b2ac9e; 76 background: linear-gradient(#f7f2f6, #b2ac9e); 77 box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0, 0, 0, 0.3), 78 0 5px 5px rgba(0, 0, 0, 0.2); 79} 80 81.switch.demo3 label i:after { 82 content: ""; 83 position: absolute; 84 left: 15%; 85 top: 25%; 86 width: 70%; 87 height: 50%; 88 background: #d2cbc3; 89 background: linear-gradient(#cbc7bc, #d2cbc3); 90 border-radius: inherit; 91} 92 93.switch.demo3 label i:before { 94 content: "off"; 95 text-transform: uppercase; 96 font-style: normal; 97 font-weight: bold; 98 color: rgba(0, 0, 0, 0.4); 99 text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e; 100 font-family: Helvetica, Arial, sans-serif; 101 font-size: 24px; 102 position: absolute; 103 top: 50%; 104 margin-top: -12px; 105 right: -50%; 106} 107 108.switch.demo3 input:checked ~ label { 109 background: #9abb82; 110} 111 112.switch.demo3 input:checked ~ label i { 113 right: -1%; 114} 115 116.switch.demo3 input:checked ~ label i:before { 117 content: "on"; 118 right: 115%; 119 color: #82a06a; 120 text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #111311; 121} 122
185 views
185 views
MIT License