Switch by vikramsinghnegi
#e8e8e8
1.switch { 2 background-color: rgba(0, 0, 0, 0.2); 3 border-radius: 50px; 4 border: 4px solid rgba(209, 92, 92, 0.1); 5 box-shadow: 8 0 6px rgba(44, 26, 26, 0.5) inset; 6 height: 42px; 7 margin: 8px; 8 position: relative; 9 width: 115px; 10 display: inline-block; 11} 12.switch-check { 13 position: absolute; 14 visibility: hidden; 15} 16.switch-label { 17 cursor: pointer; 18 display: block; 19 height: 42px; 20 text-indent: -9999px; 21 width: 115px; 22} 23.switch-label:before { 24 background: #fff; 25 background: -webkit-radial-gradient( 26 45%, 27 circle, 28 rgb(116, 78, 78) 0%, 29 rgb(255, 113, 113) 100% 30 ); 31 border-radius: 10px; 32 border: 1px solid #742323; 33 box-shadow: 0 2px 5px rgba(255, 67, 48, 0.6), 34 0 0 5px rgba(255, 159, 109, 0.5) inset; 35 content: ""; 36 display: block; 37 height: 10px; 38 left: -20%; 39 position: absolute; 40 top: 16px; 41 transition: all 0.2s; 42 width: 10px; 43 z-index: 12; 44} 45.switch-label:after { 46 background: #fff; 47 background: -moz-radial-gradient( 48 45%, 49 circle, 50 rgba(60, 60, 60, 0.6) 0%, 51 rgba(151, 151, 151, 0.6) 100% 52 ); 53 border-radius: 10px; 54 border: 1px solid #111; 55 box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5); 56 content: ""; 57 display: block; 58 height: 10px; 59 right: -20%; 60 position: absolute; 61 top: 16px; 62 transition: all 0.2s; 63 width: 10px; 64 z-index: 12; 65} 66.switch-label span { 67 background: linear-gradient(#4f4f4f, #2b2b2b); 68 border-radius: 30px; 69 border: 1px solid #1a1a1a; 70 box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 71 0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset; 72 display: block; 73 height: 38px; 74 left: 1px; 75 position: absolute; 76 top: 1px; 77 -webkit-transition: all 0.2s linear; 78 -moz-transition: all 0.2s linear; 79 -o-transition: all 0.2s linear; 80 transition: all 0.2s linear; 81 width: 53px; 82} 83.switch-label span:before { 84 background: #fff; 85 background: -webkit-linear-gradient( 86 left, 87 rgba(48, 48, 48, 0.4), 88 rgba(34, 34, 34, 0.4) 89 ); 90 background: linear-gradient( 91 left, 92 rgba(48, 48, 48, 0.4), 93 rgba(34, 34, 34, 0.4) 94 ); 95 border-radius: 30px 10px 10px 30px; 96 box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) inset; 97 content: ""; 98 display: block; 99 height: 33px; 100 left: 2px; 101 position: absolute; 102 top: 2px; 103 width: 21px; 104} 105.switch-label span:after { 106 background: #fff; 107 background: -webkit-linear-gradient( 108 right, 109 rgba(48, 48, 48, 0.4), 110 rgba(34, 34, 34, 0.4) 111 ); 112 border-radius: 10px 30px 30px 10px; 113 box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2) inset; 114 content: ""; 115 display: block; 116 height: 33px; 117 position: absolute; 118 right: 2px; 119 top: 2px; 120 width: 21px; 121} 122.switch-check:checked + .switch-label span { 123 left: 59px; 124} 125
147 views
147 views
MIT License