Apply same button-press effect to both header buttons

This commit is contained in:
2026-02-10 18:51:26 +04:00
parent ccaa56b78f
commit 55aecbd699
2 changed files with 11 additions and 8 deletions

View File

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

View File

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