Switch by 3bdel3ziz-T
#e8e8e8
1.toggle-label { 2 width: 100px; 3 height: 50px; 4 cursor: pointer; 5 display: inline-block; 6 padding: 5px; 7 background: #272727; 8 border-radius: 50px; 9 box-shadow: 0px 0px 16px -8px #fefefe; 10 user-select: none; 11} 12 13.toggle-label::before, 14.toggle-label::after { 15 content: "pause"; 16 overflow: hidden; 17 font-size: 100px; 18 text-transform: uppercase; 19 position: absolute; 20 left: 50%; 21 top: 40%; 22 transition: 200ms; 23 transform: translate(-50%, -50%); 24 z-index: -1; 25 font-family: sans-serif; 26 font-weight: 300; 27 color: transparent; 28 -webkit-text-stroke-color: #272727; 29 -webkit-text-stroke-width: 1px; 30 transition: 700ms; 31} 32 33.toggle-label::after { 34 content: "play"; 35 transform: translate(0, -50%); 36 trnasition: 700ms; 37 left: -100%; 38 transform: translate(0, -50%); 39} 40 41.toggle-label .circle { 42 appearance: none; 43 position: relative; 44 width: 40px; 45 height: 40px; 46 background: #5e5e5e; 47 border-radius: 50%; 48 transition: all 0.5s cubic-bezier(1, 0, 0, 1); 49 left: 0; 50} 51 52.toggle-label .circle:checked { 53 background: #f43f5e; 54 left: calc(100% - 40px); 55} 56 57.toggle-label .circle::before, 58.toggle-label .circle::after { 59 content: ""; 60 position: absolute; 61 top: 50%; 62 left: 50%; 63 transform: translate(-50%, -50%); 64 display: inline-block; 65 width: 0; 66 height: 0; 67 border: 10px solid transparent; 68 margin-left: 10px; 69 border-left-color: #fefefe; 70 z-index: 3; 71 transition: 200ms; 72} 73 74.toggle-label:has(.circle:checked)::before { 75 left: 100%; 76 transform: translate(0, -50%); 77} 78.toggle-label:has(.circle:checked)::after { 79 left: 50%; 80 transform: translate(-50%, -50%); 81} 82.toggle-label .circle::after { 83 border: none; 84 margin-left: -5px; 85 height: 18px; 86 width: 3px; 87 background-color: #fefefe; 88 transition-delay: 150ms; 89} 90 91.toggle-label .circle::before { 92 transition-delay: 50ms; 93} 94 95.toggle-label .circle:checked::before { 96 opacity: 0; 97} 98 99.toggle-label .circle:checked::after { 100 width: 20px; 101 height: 20px; 102 margin-left: 0px; 103 border-radius: 5px; 104} 105
285 views
Variation of aswitch
MuhammadHasann 7. February at 5:26
7. February at 5:26
that's nice
3bdel3ziz-T 8. February at 2:02
8. February at 2:02
@MuhammadHasann I liked to add some touches🐱👤:-)
vinodjangid07 29. January at 3:16
29. January at 3:16
Interesting 🔥.....
3bdel3ziz-T 29. January at 17:11
29. January at 17:11
@vinodjangid07 Thanks bro🐱👤
MIT License