From 7fef31a80ce707f9291fa1ab5dd30b5193a459c0 Mon Sep 17 00:00:00 2001
From: Sven Brodny <svenbrodny@googlemail.com>
Date: Wed, 13 Mar 2024 17:30:58 +0100
Subject: [PATCH] style: update button hover effect

---
 docs/src/components/SubscriptionForm.astro |  4 +++-
 docs/src/styles/custom-css.css             | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/SubscriptionForm.astro b/docs/src/components/SubscriptionForm.astro
index 1cf5f56..323ab53 100644
--- a/docs/src/components/SubscriptionForm.astro
+++ b/docs/src/components/SubscriptionForm.astro
@@ -85,10 +85,12 @@ const { data } = await getEntry('i18n', lang ?? 'en');
       text-decoration: none;
       font-size: var(--sl-text-sm);
       background: var(--sl-color-text-accent);
+      transition: var(--button-transition);
 
       &:hover {
         top: unset;
-        opacity: unset;
+        opacity: var(--button-hover-opacity);
+        transition: var(--button-transition);
       }
     }
   }
diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css
index 71ac0f6..383c735 100644
--- a/docs/src/styles/custom-css.css
+++ b/docs/src/styles/custom-css.css
@@ -16,6 +16,9 @@
   --color-btn: var(--sl-color-white);
   --color-chip: rgb(35, 38, 47);
   --color-chip-border: rgba(240, 246, 252, 0.1);
+
+  --button-transition: opacity 100ms ease-in-out;
+  --button-hover-opacity: 0.85;
 }
 
 :root[data-theme='light'],
@@ -50,6 +53,21 @@
   margin: 0px 2px;
 }
 
+a.action,
+.article-footer > a,
+.action-footer > a.action-button {
+  transition: var(--button-transition);
+
+  &:hover {
+    opacity: var(--button-hover-opacity);
+    transition: var(--button-transition);
+
+    &:not(.primary):not(.button-sponsor) {
+      opacity: 0.66;
+    }
+  }
+}
+
 .article-footer {
   margin-top: 3rem !important;
   display: flex;