From 53826053a11b07858e9ba415d09611af714513ea Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Fri, 30 May 2025 08:29:43 +0200
Subject: [PATCH] Add explicit button class to style buttons like the mobile
 menu toggle.

---
 README.md                                  | 2 +-
 assets/sass/components/button/_button.scss | 8 --------
 layouts/_partials/mobilemenu.html          | 2 +-
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 8bc9ae1..a5643f4 100644
--- a/README.md
+++ b/README.md
@@ -559,7 +559,7 @@ The users choice is stored in localStorage item "cookieconsent".
 It it recommended to add a link or button to allow users to change their choice. Adding the class "clearcookieconsent" is all that is needed.
 
 ```html
-<button class="clearcookieconsent">Cookie settings</button>
+<button class="button clearcookieconsent">Cookie settings</button>
 <a href="#" class="clearcookieconsent">Cookie settings</a>
 ```
 
diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss
index c21a6f1..9d6891d 100644
--- a/assets/sass/components/button/_button.scss
+++ b/assets/sass/components/button/_button.scss
@@ -1,12 +1,4 @@
 // Button
-//
-// In addition to the default styling of `<button>` and
-// `<input type="submit|image|reset|button">` elements, the `.button` class and
-// its variants can apply buttons styles to various elements (like an `<a>`
-// link).
-//
-// :hover  - Hover styling.
-// :active - Depressed button styling.
 
 .button,
 %button,
diff --git a/layouts/_partials/mobilemenu.html b/layouts/_partials/mobilemenu.html
index 41c4076..af75110 100644
--- a/layouts/_partials/mobilemenu.html
+++ b/layouts/_partials/mobilemenu.html
@@ -1,6 +1,6 @@
 <div class="mobile-nav" dir="ltr" hidden>
   <div class="mobile-nav__cover"></div>
-  <button class="mobile-nav__toggle{{ if $.Param "mobilemenuoutline" }} button--outline{{ end }}" aria-expanded="false" aria-controls="sheet">
+  <button class="mobile-nav__toggle button{{ if $.Param "mobilemenuoutline" }} button--outline{{ end }}" aria-expanded="false" aria-controls="sheet">
     {{ i18n "menu_mobile" }}
     <svg class="mobile-nav__hamburger" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
       <rect width="80" height="12" x="10" y="20" rx="5"></rect>