app/components/app-header.gjs

@@ -24,7 +24,7 @@ export default class AppHeaderComponent extends Component {
     <header class="app-header">
       <div class="header-left">
         <button
-          class="icon-btn"
+          class="menu-btn btn-press"
           type="button"
           aria-label="Menu"
           {{on "click" @onToggleMenu}}
@@ -36,7 +36,7 @@ export default class AppHeaderComponent extends Component {
       <div class="header-right">
         <div class="user-menu-container">
           <button
-            class="user-btn"
+            class="user-btn btn-press"
             type="button"
             aria-label="User Menu"
             {{on "click" this.toggleUserMenu}}

app/styles/app.css

@@ -74,7 +74,15 @@ body {
   pointer-events: auto; /* Re-enable clicks for buttons */
 }
 
-.icon-btn {
+.btn-press {
+  transition: transform 0.1s;
+}
+
+.btn-press:active {
+  transform: scale(0.95);
+}
+
+.menu-btn {
   background: white;
   border: none;
   border-radius: 50%;
@@ -85,11 +93,6 @@ body {
   justify-content: center;
   box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
   cursor: pointer;
-  transition: transform 0.1s;
-}
-
-.icon-btn:active {
-  transform: scale(0.95);
 }
 
 .user-btn {