fix: 🐛 Content should no longer shift on button hover

Might look weird on weird UAs (opera, safari, etc...) idk

1 files changed, 11 insertions, 4 deletions

diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css
index 3331684..9e0b910 100644
--- a/talermerchantdemos/static/blog.css
+++ b/talermerchantdemos/static/blog.css
@@ -26,10 +26,10 @@
   /* Variables */
   --link-colour: var(--button-confirm-foreground);
   --background: var(--button-confirm-background);
+  --bottom-line: 6px;
   /* General */
   display: block;
   border-radius: 10px;
-  border-bottom: 0.3em solid var(--demo-common-dark-blue);
   color: var(--link-colour);
   background: var(--background);
   text-decoration: none;
@@ -38,14 +38,21 @@
   padding: 10px 10px;
   /* Positioning */
   margin-top: 10px;
+  margin-bottom: 0;
   /* Transitions */
-  transition: border-bottom 1s, background 1s, margin-top 1s;
+  transition: background 1s, box-shadow 1s, transform 1s;
+  /* Border */
+  box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue);
+  -webkit-box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue);
+  -moz-box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue);
+  /* Transformations */
+  transform: none;
 }
 .payLink:hover {
   --background: var(--button-confirm-hovering-background);
   --link-colour: var(--button-confirm-hovering-foreground);
-  border-bottom: 0 solid var(--demo-common-dark-blue);
-  margin-top: calc(10px + 0.3em);
+  --bottom-line: 0;
+  transform: translateY(6px);
 }
 .payLink:active {
   --background: var(--button-confirm-active-background);