This post is saved as a draft.
#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 3.5em; 7 height: 2em; 8} 9 10/* Hide default HTML checkbox */ 11.switch input { 12 opacity: 0; 13 width: 0; 14 height: 0; 15} 16 17/* The slider */ 18.slider { 19 position: absolute; 20 cursor: pointer; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 padding-top: 5px; 26 background-color: rgb(199, 219, 215); 27 transition: 0.4s; 28 border-radius: 30px; 29 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 30 border: 1px solid #fff; 31} 32 33.slider .fug .nav { 34 position: absolute; 35 height: 1.4em; 36 width: 1.5em; 37 left: 0.3em; 38 bottom: 0.3em; 39 transition: 0.4s; 40 z-index: 10; 41 transform: rotate(45deg); 42 fill: #fff; 43} 44 45.switch input:checked + .slider { 46 background-color: #2b4360; 47} 48 49.switch input:focus + .slider { 50 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 51} 52 53.switch input:checked + .slider .fug .nav { 54 transition: 0.4s; 55 transform: translateX(1.3em) rotate(45deg); 56 padding: 3px; 57 animation: 4s nav linear infinite; 58} 59 60@keyframes nav { 61 0% { 62 transform: translateX(1.3em) rotate(45deg); 63 } 64 10% { 65 transform: translateX(1.1em) rotate(45deg); 66 } 67 30% { 68 transform: translateX(1.2em) rotate(45deg); 69 } 70 50% { 71 transform: translateX(1em) rotate(45deg); 72 } 73 70% { 74 transform: translateX(1.2em) rotate(45deg); 75 } 76 80% { 77 transform: translateX(1em) rotate(45deg); 78 } 79 90% { 80 transform: translateX(1.2em) rotate(45deg); 81 } 82 100% { 83 transform: translateX(1.3em) rotate(45deg); 84 } 85} 86 87.star { 88 opacity: 0; 89 transition: 0.2s linear; 90} 91 92.switch input:checked + .slider .star { 93 opacity: 1; 94 transition: 0.2s linear; 95 animation: 2s piscar linear infinite; 96} 97 98.star:nth-last-child(1) { 99 position: absolute; 100 top: 7px; 101 left: 13px; 102} 103.star:nth-last-child(2) { 104 position: absolute; 105 top: 14px; 106 left: 19px; 107} 108.star:nth-last-child(3) { 109 position: absolute; 110 top: 18px; 111 left: 9px; 112} 113.star:nth-last-child(4) { 114 position: absolute; 115 top: 23px; 116 left: 24px; 117} 118 119@keyframes piscar { 120 0% { 121 opacity: 1; 122 } 123 50% { 124 opacity: 0; 125 } 126 100% { 127 opacity: 1; 128 } 129} 130
Variation of aswitch
Variation of aswitch