style: add & update button hover stylings

docs/src/components/SubscriptionForm.astro

@@ -85,6 +85,13 @@ 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;
+        transform: var(--button-transform);
+        transition: var(--button-transition);
+      }
     }
   }
 

docs/src/content/docs/index.mdx

@@ -69,7 +69,10 @@ import SubscriptionForm from '../../components/SubscriptionForm.astro';
 ---
 
 <div class="article-footer">
-  <a href="https://github.com/sponsors/tomalaforge" alt="Sponsor link">
+  <a
+    class="action"
+    href="https://github.com/sponsors/tomalaforge"
+    alt="Sponsor link">
     <MyIcon name="fillHeart" size="1.2rem" color="white" />
     Sponsor the Project
   </a>

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-transform: translateY(-1px);
+  --button-transition: all 100ms ease-in-out 30ms;
 }
 
 :root[data-theme='light'],
@@ -50,6 +53,18 @@
   margin: 0px 2px;
 }
 
+a.action, 
+.article-footer > a, 
+.action-footer > a.action-button {
+  transition: var(--button-transition);
+
+  &:hover {
+    opacity: 0.9;
+    transform: var(--button-transform);
+    transition: var(--button-transition);
+  }
+}
+
 .article-footer {
   margin-top: 3rem !important;
   display: flex;