feat(button): added animation to buttons (#2589)

Author: agliga

.changeset/fuzzy-badgers-fix.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(button): added animation to buttons

dist/button/button.css

@@ -171,6 +171,12 @@ button.btn--primary {
         var(--color-foreground-on-accent)
     );
     font-weight: 700;
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--primary:active,
+button.btn--primary:active {
+    transform: scale(0.97);
 }
 
 a.fake-btn--primary {
@@ -324,11 +330,19 @@ a.fake-btn--secondary,
 button.btn--secondary {
     background-color: var(--btn-secondary-background-color, transparent);
     border-color: var(--btn-secondary-border-color, var(--color-stroke-accent));
+    color: var(
+        --btn-secondary-foreground-color,
+        var(--color-foreground-accent)
+    );
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--secondary:active,
+button.btn--secondary:active {
+    transform: scale(0.97);
 }
 
-a.fake-btn--secondary,
-a.fake-btn--secondary:visited,
-button.btn--secondary {
+a.fake-btn--secondary:visited {
     color: var(
         --btn-secondary-foreground-color,
         var(--color-foreground-accent)
@@ -435,6 +449,12 @@ a.fake-btn--secondary[aria-disabled="true"] {
 a.fake-btn--tertiary,
 button.btn--tertiary {
     border-color: var(--btn-tertiary-border-color, var(--color-stroke-default));
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+}
+a.fake-btn--tertiary:active,
+button.btn--tertiary:active {
+    transform: scale(0.97);
 }
 
 a.fake-btn--tertiary[href]:focus,

src/sass/button/button.scss

@@ -124,6 +124,8 @@ a.fake-btn--primary {
         color-foreground-on-accent
     );
 
+    @include btn-animations();
+
     font-weight: bold;
 }
 
@@ -281,6 +283,8 @@ a.fake-btn--secondary {
         btn-secondary-foreground-color,
         color-foreground-accent
     );
+
+    @include btn-animations();
 }
 
 a.fake-btn--secondary:visited {
@@ -388,6 +392,8 @@ a.fake-btn--tertiary {
         btn-tertiary-border-color,
         color-stroke-default
     );
+
+    @include btn-animations();
 }
 
 button.btn--tertiary:not([disabled], [aria-disabled="true"]),

src/sass/mixins/private/_button-mixins.scss

@@ -101,3 +101,12 @@ $button-border-radius-large: 24px;
         @include btn-fixed-height();
     }
 }
+
+@mixin btn-animations() {
+    transition: all var(--motion-duration-short-3)
+        var(--motion-easing-quick-enter);
+
+    &:active {
+        transform: scale(0.97);
+    }
+}