From 98d7922675ec51a2c7e38e82ff43d7ab8eabfe2b Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Mon, 24 May 2021 15:28:52 +0300
Subject: [PATCH] Add button animation snippets

---
 snippets/button-border-animation.md       |  6 +--
 snippets/button-focus-swing-animation.md  | 52 +++++++++++++++++++++++
 snippets/button-hover-grow-animation.md   | 29 +++++++++++++
 snippets/button-hover-shrink-animation.md | 29 +++++++++++++
 4 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 snippets/button-focus-swing-animation.md
 create mode 100644 snippets/button-hover-grow-animation.md
 create mode 100644 snippets/button-hover-shrink-animation.md

diff --git a/snippets/button-border-animation.md b/snippets/button-border-animation.md
index fdab4a95d..8e610f103 100644
--- a/snippets/button-border-animation.md
+++ b/snippets/button-border-animation.md
@@ -14,7 +14,7 @@ Creates a border animation on hover.
 
 ```css
 .animated-border-button {
-  background-color: #141414;
+  background-color: #263059;
   border: none;
   color: #ffffff;
   outline: none;
@@ -33,13 +33,13 @@ Creates a border animation on hover.
 }
 
 .animated-border-button:before {
-  border-top: 2px solid #141414;
+  border-top: 2px solid #263059;
   right: 0;
   top: -4px;
 }
 
 .animated-border-button:after {
-  border-bottom: 2px solid #141414;
+  border-bottom: 2px solid #263059;
   bottom: -4px;
   left: 0;
 }
diff --git a/snippets/button-focus-swing-animation.md b/snippets/button-focus-swing-animation.md
new file mode 100644
index 000000000..282a8cd8f
--- /dev/null
+++ b/snippets/button-focus-swing-animation.md
@@ -0,0 +1,52 @@
+---
+title: Button swing animation
+tags: animation,intermediate
+---
+
+Creates a swing animation on focus.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:focus` pseudo-class to apply an `animation` that uses `transform` to make the element swing.
+- Use `animation-iteration-count` to only play the animation once.
+
+```html
+<button class="button-swing">Submit</button>
+```
+
+```css
+.button-swing {
+  color: #65b5f6;
+  background-color: transparent;
+  border: 1px solid #65b5f6;
+  border-radius: 4px;
+  padding: 0 16px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.button-swing:focus {
+  animation: swing 1s ease;
+  animation-iteration-count: 1;
+}
+
+@keyframes swing {
+  15% {
+    transform: translateX(5px);
+  }
+  30% {
+    transform: translateX(-5px);
+  }
+  50% {
+    transform: translateX(3px);
+  }
+  65% {
+    transform: translateX(-3px);
+  }
+  80% {
+    transform: translateX(2px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+```
diff --git a/snippets/button-hover-grow-animation.md b/snippets/button-hover-grow-animation.md
new file mode 100644
index 000000000..76a6f95a6
--- /dev/null
+++ b/snippets/button-hover-grow-animation.md
@@ -0,0 +1,29 @@
+---
+title: Button grow animation
+tags: animation,beginner
+---
+
+Creates a grow animation on hover.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `transform` to `scale(1.1)`, growing the element when the user hovers over it.
+
+```html
+<button class="button-grow">Submit</button>
+```
+
+```css
+.button-grow {
+  color: #65b5f6;
+  background-color: transparent;
+  border: 1px solid #65b5f6;
+  border-radius: 4px;
+  padding: 0 16px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.button-grow:hover {
+  transform: scale(1.1);
+}
+```
diff --git a/snippets/button-hover-shrink-animation.md b/snippets/button-hover-shrink-animation.md
new file mode 100644
index 000000000..6ab2ed8a5
--- /dev/null
+++ b/snippets/button-hover-shrink-animation.md
@@ -0,0 +1,29 @@
+---
+title: Button shrink animation
+tags: animation,beginner
+---
+
+Creates a shrink animation on hover.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `transform` to `scale(0.8)`, shrinking the element when the user hovers over it.
+
+```html
+<button class="button-shrink">Submit</button>
+```
+
+```css
+.button-shrink {
+  color: #65b5f6;
+  background-color: transparent;
+  border: 1px solid #65b5f6;
+  border-radius: 4px;
+  padding: 0 16px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.button-shrink:hover {
+  transform: scale(0.8);
+}
+```