Add hover and active effects to icon buttons

kangasta · Feb 13, 2024 · 44a40b5 · 44a40b5
1 parent aa281c8
commit 44a40b5
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/components/Menu/IconButton.svelte b/src/components/Menu/IconButton.svelte
@@ -56,6 +56,14 @@
     flex-direction: column
     align-items: center
 
+    transition: transform 125ms
+
+    &:hover
+      transform: scale(1.125) translateY(-0.25rem)
+
+    &:active svg
+      transform: translateY(0.25rem)
+
   .clickable
     cursor: pointer