Button by Subu19
#e8e8e8
1.hamburger { 2 height: 50px; 3 width: 50px; 4 transform: 0.2s; 5 position: relative; 6} 7.hamburger .checkbox { 8 position: absolute; 9 opacity: 0; 10 height: 100%; 11 width: 100%; 12 cursor: pointer; 13} 14.line { 15 transition: 0.5s; 16 stroke-width: 6px; 17 stroke: black; 18} 19.lineTop { 20 stroke-dasharray: 40 40; 21 stroke-dashoffset: 25; 22} 23.lineBottom { 24 stroke-dasharray: 40 40; 25 stroke-dashoffset: 60; 26} 27.lineMid { 28 stroke-dasharray: 40 40; 29} 30.hamburger .checkbox:checked + svg .line { 31 stroke: crimson; 32} 33.hamburger .checkbox:checked + svg .lineTop { 34 stroke-dashoffset: 0; 35 transform-origin: left; 36 transform: rotateZ(45deg) translate(-7px, -5px); 37} 38.hamburger .checkbox:checked + svg .lineMid { 39 stroke-dashoffset: 40; 40} 41.hamburger .checkbox:checked + svg .lineBottom { 42 stroke-dashoffset: 0; 43 transform-origin: left; 44 transform: rotateZ(-45deg) translate(-5px, 5px); 45} 46
999 views
999 views
MIT License