Switch by JaydipPrajapati1910
#e8e8e8
1.btn-container { 2 display: table-cell; 3 vertical-align: middle; 4 text-align: center; 5} 6 7.btn-color-mode-switch { 8 display: inline-block; 9 margin: 0px; 10 position: relative; 11} 12 13.btn-color-mode-switch > label.btn-color-mode-switch-inner { 14 margin: 0px; 15 width: 140px; 16 height: 40px; 17 background-color: #fcce8a; 18 border-radius: 26px; 19 overflow: hidden; 20 position: relative; 21 transition: all 0.3s ease; 22 /*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/ 23 display: block; 24} 25 26.btn-color-mode-switch > label.btn-color-mode-switch-inner:before { 27 content: attr(data-on); 28 position: absolute; 29 font-size: 20px; 30 font-weight: 600; 31 top: 7px; 32 right: 20px; 33 color: #222; 34} 35 36.btn-color-mode-switch > label.btn-color-mode-switch-inner:after { 37 content: attr(data-off); 38 width: 70px; 39 height: 25px; 40 background: #fff; 41 border-radius: 26px; 42 position: absolute; 43 font-size: 20px; 44 display: flex; 45 justify-content: center; 46 left: 2px; 47 top: 2px; 48 text-align: center; 49 transition: all 0.3s ease; 50 box-shadow: 0px 0px 6px -2px #111; 51 padding: 5px 0px; 52 color: #222; 53 font-weight: 600; 54} 55 56.btn-color-mode-switch input[type="checkbox"] { 57 cursor: pointer; 58 width: 50px; 59 height: 25px; 60 opacity: 0; 61 position: absolute; 62 top: 0; 63 z-index: 1; 64 margin: 0px; 65} 66 67.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner { 68 background-color: #fcce8a; 69} 70 71.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after { 72 content: attr(data-on); 73 left: 68px; 74} 75 76.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before { 77 content: attr(data-off); 78 right: auto; 79 left: 20px; 80} 81 82
1.7K views
1.7K views
MIT License