Switch by MRez321
#e8e8e8
1.theme-switch { 2 position: relative; 3 display: flex; 4 justify-content: center; 5 direction: rtl; 6} 7 8#theme-checkbox { 9 display: none; 10} 11 12#theme-checkbox + label { 13 /* change the font-size below to change the size of the switch button*/ 14 font-size: 2rem; 15 height: 1em; 16 width: 2.5em; 17 border-radius: 0.25em; 18 cursor: pointer; 19 display: flex; 20 justify-content: space-between; 21 background-color: #cecece; 22 position: relative; 23} 24 25#theme-checkbox:checked + label { 26 background-color: #3a3a3a; 27} 28 29#theme-checkbox + label:active { 30 transform: scale(0.85); 31 transition: transform 0.2s; 32} 33 34#theme-checkbox + label div { 35 width: 0.8em; 36 height: 0.8em; 37 border-radius: inherit; 38 position: absolute; 39 top: 0.1em; 40 left: 0.1em; 41 z-index: 10; 42 transition: 0.5s cubic-bezier(1, 0.33, 0.11, 1.34); 43 background-color: #f2f2f2; 44} 45 46#theme-checkbox:checked + label div { 47 /* left: calc(2.5em - .8em - .1em); */ 48 left: 1.6em; 49 background-color: #212121; 50} 51 52#theme-checkbox + label span { 53 display: flex; 54} 55 56#theme-checkbox + label svg { 57 display: inline-block; 58 height: 1em; 59 width: 1em; 60 padding: 0.15em; 61 box-sizing: border-box; 62} 63 64#theme-checkbox + label span:first-of-type { 65 color: #3a3a3a; 66} 67 68#theme-checkbox + label span:last-of-type { 69 color: #cecece; 70} 71
896 views
896 views
MIT License