Button by Laurits123456
#212121
1/*pushing a hamburger menu into a pillow texture like background*/ 2 3.menuButton { 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 flex-direction: column; 8 gap: 13%; 9 color: #090909; 10 width: 3.5em; 11 height: 3.5em; 12 border-radius: 0.5em; 13 background: #171717; 14 border: 1px solid #171717; 15 transition: all .3s; 16 box-shadow: inset 4px 4px 12px #3a3a3a, 17 inset -4px -4px 12px #000000; 18} 19 20.menuButton:hover { 21 border: 1px solid black; 22} 23 24.menuButton:active { 25 color: #666; 26 box-shadow: 6px 6px 12px #3a3a3a, 27 -6px -6px 12px #000000; 28} 29 30input[type = "checkbox"] { 31 -webkit-appearance: none; 32 display: none; 33 visibility: hidden; 34} 35 36.menuButton span { 37 width: 30px; 38 height: 4px; 39 background: rgb(200,200,200); 40 border-radius: 100px; 41 transition: 0.3s ease; 42} 43 44input[type]:checked ~ span.top { 45 transform: translateY(290%)rotate(45deg); 46 width: 40px; 47} 48 49input[type]:checked ~ span.bot { 50 transform: translateY(-270%) rotate(-45deg); 51 width: 40px; 52 box-shadow: 0 0 10px #495057; 53} 54 55input[type]:checked ~ span.mid { 56 transform: translateX(-20px); 57 opacity: 0; 58}
1.8K views
1.8K views
MIT License