Switch by tarantino421
#e8e8e8
1.buttons__burger { 2 --size: 3rem; 3 --clr: #000; 4 width: var(--size); 5 height: calc(0.7 * var(--size)); 6 cursor: pointer; 7 position: relative; 8 display: block; 9} 10 11.buttons__burger #burger { 12 display: none; 13 width: 100%; 14 height: 100%; 15} 16 17.buttons__burger span { 18 display: block; 19 position: absolute; 20 width: 100%; 21 border-radius: 0.5rem; 22 border: 3px solid var(--clr); 23 background-color: var(--clr); 24 transition: 0.15s ease-in-out; 25} 26 27.buttons__burger span:nth-of-type(1) { 28 top: 0; 29 right: 0; 30 transform-origin: right center; 31} 32 33.buttons__burger span:nth-of-type(2) { 34 top: 50%; 35 transform: translateY(-50%); 36} 37 38.buttons__burger span:nth-of-type(3) { 39 top: 100%; 40 right: 0; 41 transform-origin: right center; 42 transform: translateY(-100%); 43} 44 45.buttons__burger #burger:checked ~ span:nth-of-type(1) { 46 transform: translateY(-30%) rotate(40deg); 47 width: 50%; 48 top: 50%; 49} 50 51.buttons__burger #burger:checked ~ span:nth-of-type(3) { 52 transform: translateY(-70%) rotate(-40deg); 53 width: 50%; 54 top: 50%; 55}
2.4K views
2.4K views
MIT License