2.3K views
CSSAdd prefixes
1/* 2Button insperation by @ke1221 3Menu icon transofmation insperation by @Ali-Tahmazi99 4*/ 5.menuButton { 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 flex-direction: column; 10 gap: 13%; 11 color: #090909; 12 width: 3.5em; 13 height: 3.5em; 14 border-radius: 0.5em; 15 background: #e8e8e8; 16 border: 1px solid #e8e8e8; 17 transition: all .3s; 18 box-shadow: 6px 6px 12px #c5c5c5, 19 -6px -6px 12px #ffffff; 20} 21 22.menuButton:hover { 23 border: 1px solid white; 24} 25 26.menuButton:active { 27 color: #666; 28 box-shadow: inset 4px 4px 12px #c5c5c5, 29 inset -4px -4px 12px #ffffff; 30} 31 32input[type = "checkbox"] { 33 -webkit-appearance: none; 34 display: none; 35 visibility: hidden; 36} 37 38.menuButton span { 39 width: 30px; 40 height: 4px; 41 background: #131313; 42 border-radius: 100px; 43 transition: 0.3s ease; 44} 45 46input[type]:checked ~ span.top { 47 transform: translateY(290%)rotate(45deg); 48 width: 40px; 49} 50 51input[type]:checked ~ span.bot { 52 transform: translateY(-270%) rotate(-45deg); 53 width: 40px; 54 box-shadow: 0 0 10px #495057; 55} 56 57input[type]:checked ~ span.mid { 58 transform: translateX(-20px); 59 opacity: 0; 60}
HTML
1<label for="check" class="menuButton"> 2 <input id="check" type="checkbox"> 3 <span class="top"></span> 4 <span class="mid"></span> 5 <span class="bot"></span> 6</label>