set mobile menu toggle to button design

css/style.css

@@ -377,6 +377,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo {
   border-radius: var(--radius-xxl);
   text-decoration: none;
   transition: transform 0.2s ease;
+  cursor: pointer;
 }
 
 button, .button-primary, .logo {
@@ -548,7 +549,6 @@ button:visited, .button-primary:visited, .logo:visited {
   color: var(--color-text-button-seconary-active);
 }
 
-
 .menu-button:active, 
 .desktop-nav a[aria-current="page"]:active,
 .mobile-menu a[aria-current="page"]:active {
@@ -580,60 +580,25 @@ button:visited, .button-primary:visited, .logo:visited {
 
 .menu-toggle,
 .menu-close {
-  width: 44px;
+  /* width: 44px;
   height: 44px;
   border: 1px solid var(--border);
   border-radius: 0.75rem;
   background: #fff;
   color: inherit;
-  cursor: pointer;
+  cursor: pointer; */
 }
 
 .menu-toggle {
   display: none;
   position: relative;
-}
-
-.menu-toggle span {
-  position: absolute;
-  left: 50%;
-  width: 20px;
-  height: 2px;
-  background: currentColor;
-  border-radius: 999px;
-  transform-origin: center;
   transition: transform 0.25s ease, opacity 0.25s ease;
 }
 
-.menu-toggle span:nth-child(1) {
+.menu-toggle.is-open {
-  top: 14px;
-  transform: translateX(-50%);
-}
-
-.menu-toggle span:nth-child(2) {
-  top: 21px;
-  transform: translateX(-50%);
-}
-
-.menu-toggle span:nth-child(3) {
-  top: 28px;
-  transform: translateX(-50%);
-}
-
-.menu-toggle.is-open span:nth-child(1) {
-  top: 21px;
-  transform: translateX(-50%) rotate(45deg);
-}
-
-.menu-toggle.is-open span:nth-child(2) {
   opacity: 0;
 }
 
-.menu-toggle.is-open span:nth-child(3) {
-  top: 21px;
-  transform: translateX(-50%) rotate(-45deg);
-}
-
 .menu-overlay {
   position: fixed;
   inset: 0;

index.html

@@ -71,9 +71,7 @@
         aria-haspopup="true"
         aria-label="Open menu"
       >
-        <span></span>
+        Menu
-        <span></span>
-        <span></span>
       </button>
     </div>
   </header>