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