From 5e5806c6ae02b53a2da703c370651e38bad2af7b Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Mon, 14 Apr 2025 10:36:03 -0700
Subject: [PATCH] fix(buttons.css): support for reduced motion

---
 package-lock.json                        |  4 ++--
 package.json                             |  2 +-
 src/assets/styles/base/vars.css          |  1 +
 src/assets/styles/components/buttons.css | 10 +++++++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 750c72e..95aa515 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.7.1",
+      "version": "1.7.2",
       "license": "MIT",
       "dependencies": {
         "html-minifier-terser": "7.2.0",
diff --git a/package.json b/package.json
index d100350..301ef0c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {
diff --git a/src/assets/styles/base/vars.css b/src/assets/styles/base/vars.css
index 5b2967a..d5b106a 100644
--- a/src/assets/styles/base/vars.css
+++ b/src/assets/styles/base/vars.css
@@ -163,6 +163,7 @@
   @media (prefers-reduced-motion) {
     --transform-icon-tilt: var(--transform-icon-default);
     --underline-offset-hover: var(--underline-offset-default);
+    --button-offset-hover: 0px;
   }
 
 /* filters */
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 4a082fa..2626559 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -17,10 +17,18 @@ button:not([data-modal-button]),
   overflow: hidden;
   color: var(--text-color-inverted);
   background-color: var(--section-color, var(--accent-color));
-  transition: var(--transition-duration-default) var(--transition-ease-in-out);
+  transition: translateY var(--transition-duration-default) var(--transition-ease-in-out);
+
+  @media (prefers-reduced-motion) {
+    transition: background-color var(--transition-duration-default) var(--transition-ease-in-out);
+  }
 
   &:not(.active):is(:hover, :active, :focus, :focus-within) {
     transform: translateY(var(--button-offset-hover));
+
+    @media (prefers-reduced-motion) {
+      background-color: var(--accent-color-hover);
+    }
   }
 
   &.active {