Button style improvments.

frjo · Dec 11, 2024 · 7a0b81b · 7a0b81b
1 parent 3a7bf40
commit 7a0b81b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss
@@ -60,7 +60,7 @@ $colors: (
   mobile-menu-cover:      rgba($black, .2),
 
   button:                 $brand,
-  button-hover:           $brand-alt,
+  button-hover:           $brand-dark,
   button-text:            $white,
   button-text-hover:      $white,
   button-disabled:        $grey,

diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
@@ -151,10 +151,6 @@ main {
       background-color: var(--color-warning-bg);
     }
   }
-
-  button {
-    @extend %button--shadow;
-  }
 }
 
 .js-submitted {

diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss
@@ -78,13 +78,29 @@ button,
 
   &--shadow {
     &:hover {
-      box-shadow: 2px 2px 5px 1px var(--color-button-hover);
+      box-shadow: 2px 2px 5px 1px var(--color-button-disabled);
     }
 
     &:active {
       box-shadow: inset 2px 2px 5px 1px var(--color-button);
     }
   }
+
+  &--plain {
+    appearance: none;
+    padding: .5rem;
+    color: currentcolor;
+    background-color: unset;
+    border: unset;
+
+    &:hover,
+    &:focus-visible,
+    &:active {
+      color: currentcolor;
+      background-color: unset;
+      scale: 1.15;
+    }
+  }
 }
 
 // The disabled variation should always go last, so that it overrides any