760 views
1.checkbox-wrapper-10 .tgl { 2 display: none; 3} 4 5.checkbox-wrapper-10 .tgl, 6 .checkbox-wrapper-10 .tgl:after, 7 .checkbox-wrapper-10 .tgl:before, 8 .checkbox-wrapper-10 .tgl *, 9 .checkbox-wrapper-10 .tgl *:after, 10 .checkbox-wrapper-10 .tgl *:before, 11 .checkbox-wrapper-10 .tgl + .tgl-btn { 12 box-sizing: border-box; 13} 14 15.checkbox-wrapper-10 .tgl::-moz-selection, 16 .checkbox-wrapper-10 .tgl:after::-moz-selection, 17 .checkbox-wrapper-10 .tgl:before::-moz-selection, 18 .checkbox-wrapper-10 .tgl *::-moz-selection, 19 .checkbox-wrapper-10 .tgl *:after::-moz-selection, 20 .checkbox-wrapper-10 .tgl *:before::-moz-selection, 21 .checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection, 22 .checkbox-wrapper-10 .tgl::selection, 23 .checkbox-wrapper-10 .tgl:after::selection, 24 .checkbox-wrapper-10 .tgl:before::selection, 25 .checkbox-wrapper-10 .tgl *::selection, 26 .checkbox-wrapper-10 .tgl *:after::selection, 27 .checkbox-wrapper-10 .tgl *:before::selection, 28 .checkbox-wrapper-10 .tgl + .tgl-btn::selection { 29 background: none; 30} 31 32.checkbox-wrapper-10 .tgl + .tgl-btn { 33 outline: 0; 34 display: block; 35 width: 4em; 36 height: 2em; 37 position: relative; 38 cursor: pointer; 39 -webkit-user-select: none; 40 -moz-user-select: none; 41 -ms-user-select: none; 42 user-select: none; 43} 44 45.checkbox-wrapper-10 .tgl + .tgl-btn:after, 46 .checkbox-wrapper-10 .tgl + .tgl-btn:before { 47 position: relative; 48 display: block; 49 content: ""; 50 width: 50%; 51 height: 100%; 52} 53 54.checkbox-wrapper-10 .tgl + .tgl-btn:after { 55 left: 0; 56} 57 58.checkbox-wrapper-10 .tgl + .tgl-btn:before { 59 display: none; 60} 61 62.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after { 63 left: 50%; 64} 65 66.checkbox-wrapper-10 .tgl-flip + .tgl-btn { 67 padding: 2px; 68 transition: all 0.2s ease; 69 font-family: sans-serif; 70 perspective: 100px; 71} 72 73.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after, 74 .checkbox-wrapper-10 .tgl-flip + .tgl-btn:before { 75 display: inline-block; 76 transition: all 0.4s ease; 77 width: 100%; 78 text-align: center; 79 position: absolute; 80 line-height: 2em; 81 font-weight: bold; 82 color: #fff; 83 position: absolute; 84 top: 0; 85 left: 0; 86 -webkit-backface-visibility: hidden; 87 backface-visibility: hidden; 88 border-radius: 4px; 89} 90 91.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after { 92 content: attr(data-tg-on); 93 background: #02C66F; 94 transform: rotateY(-180deg); 95} 96 97.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before { 98 background: #FF3A19; 99 content: attr(data-tg-off); 100} 101 102.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before { 103 transform: rotateY(-20deg); 104} 105 106.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before { 107 transform: rotateY(180deg); 108} 109 110.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after { 111 transform: rotateY(0); 112 left: 0; 113 background: #7FC6A6; 114} 115 116.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after { 117 transform: rotateY(20deg); 118}
Dev-MdTuhin
Md. Tuhin
I am a skilled website designer and Python developer, proficient in front-end and back-end technologies, and always eager to expand my knowledge and skills.
MIT License