Switch by JaydipPrajapati1910
#e8e8e8
1.btn-container { 2 display: table-cell; 3 vertical-align: middle; 4 text-align: center; 5} 6 7.btn-container i { 8 display: inline-block; 9 position: relative; 10 top: -9px; 11} 12 13label { 14 font-size: 13px; 15 color: #424242; 16 font-weight: 500; 17} 18 19.btn-color-mode-switch { 20 display: inline-block; 21 margin: 0px; 22 position: relative; 23} 24 25.btn-color-mode-switch > label.btn-color-mode-switch-inner { 26 margin: 0px; 27 width: 140px; 28 height: 30px; 29 background: #E0E0E0; 30 border-radius: 26px; 31 overflow: hidden; 32 position: relative; 33 transition: all 0.3s ease; 34 /*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/ 35 display: block; 36} 37 38.btn-color-mode-switch > label.btn-color-mode-switch-inner:before { 39 content: attr(data-on); 40 position: absolute; 41 font-size: 12px; 42 font-weight: 500; 43 top: 7px; 44 right: 20px; 45} 46 47.btn-color-mode-switch > label.btn-color-mode-switch-inner:after { 48 content: attr(data-off); 49 width: 70px; 50 height: 16px; 51 background: #fff; 52 border-radius: 26px; 53 position: absolute; 54 left: 2px; 55 top: 2px; 56 text-align: center; 57 transition: all 0.3s ease; 58 box-shadow: 0px 0px 6px -2px #111; 59 padding: 5px 0px; 60} 61 62.btn-color-mode-switch > .alert { 63 display: none; 64 background: #FF9800; 65 border: none; 66 color: #fff; 67} 68 69.btn-color-mode-switch input[type="checkbox"] { 70 cursor: pointer; 71 width: 50px; 72 height: 25px; 73 opacity: 0; 74 position: absolute; 75 top: 0; 76 z-index: 1; 77 margin: 0px; 78} 79 80.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner { 81 background: #151515; 82 color: #fff; 83} 84 85.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after { 86 content: attr(data-on); 87 left: 68px; 88 background: #3c3c3c; 89} 90 91.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before { 92 content: attr(data-off); 93 right: auto; 94 left: 20px; 95} 96 97.btn-color-mode-switch input[type="checkbox"]:checked ~ .alert { 98 display: block; 99} 100 101.dark-preview { 102 background: #0d0d0d; 103} 104 105.white-preview { 106 background: #fff; 107} 108 109
2.7K views
2.7K views
MIT License