Checkbox by david-mohseni
#212121
1.menu-icon { 2 position: relative; 3 width: 60px; 4 height: 50px; 5 background: rgb(0, 0, 0); 6 padding: 10px; 7 cursor: pointer; 8} 9.menu-icon input { 10 display: none; 11} 12.menu-icon span { 13 display: block; 14 position: relative; 15 height: 3px; 16 width: 100%; 17 background: rgb(255, 255, 255); 18 border-radius: 10px; 19 opacity: 1; 20 left: 0; 21 margin-bottom: 24%; 22 transition: 0.3s ease-in-out; 23} 24.menu-icon span { 25 transform-origin: left center; 26} 27.menu-icon input:checked ~ span { 28 background: red; 29 left: 5px; 30 margin-bottom: 28%; 31} 32.menu-icon input:checked ~ span:nth-of-type(1) { 33 transform: rotate(45deg); 34} 35.menu-icon input:checked ~ span:nth-of-type(2) { 36 opacity: 0; 37} 38.menu-icon input:checked ~ span:nth-of-type(3) { 39 transform: rotate(-45deg); 40} 41
823 views
823 views
MIT License