From 6abebfe811f263c80d11ed3cb1ad1e12dfe7f661 Mon Sep 17 00:00:00 2001
From: Hilary Matusiak <hilary.matusiak@woodlanddirect.com>
Date: Thu, 8 Oct 2020 13:48:11 -0400
Subject: [PATCH 1/2] add button-hover-fill-animation

---
 snippets/button-hover-fill-animation.md | 36 +++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 snippets/button-hover-fill-animation.md

diff --git a/snippets/button-hover-fill-animation.md b/snippets/button-hover-fill-animation.md
new file mode 100644
index 000000000..b7ca8ebc8
--- /dev/null
+++ b/snippets/button-hover-fill-animation.md
@@ -0,0 +1,36 @@
+---
+title: Button Hover Fill Animation
+tags: animation,beginner
+---
+
+Creates a fill animation in a button on hover.
+
+- ` transition: 0.3s ease-in-out;` gives the ease into the hover/active state.
+- Change the background color to work with the font color in both states.
+- Elongate the transition by increasing the seconds.
+- Edit `padding: 20px;` to make the button feel larger or thinner.
+
+```html
+<button class="animated-fill-button">Click</button>
+```
+
+```css
+button.animated-fill-button {
+  transition: 0.3s ease-in-out;
+  color: black;
+  border: black 2px solid;
+  background-color: white;
+  font-size: 14px;
+  text-transform: uppercase;
+  cursor: pointer;
+  padding: 20px;
+  font-weight: bold;
+}
+button.animated-fill-button:hover,
+button.animated-fill-button:focus,
+button.animated-fill-button:active
+{
+  background-color: black;
+  color: white;
+}
+```

From c6a536d8b67a348efe7427eda8bdd1caae3a89d3 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 2 Apr 2021 21:34:43 +0300
Subject: [PATCH 2/2] Update button-hover-fill-animation.md

---
 snippets/button-hover-fill-animation.md | 37 ++++++++++---------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/snippets/button-hover-fill-animation.md b/snippets/button-hover-fill-animation.md
index b7ca8ebc8..c0573d75c 100644
--- a/snippets/button-hover-fill-animation.md
+++ b/snippets/button-hover-fill-animation.md
@@ -1,36 +1,29 @@
 ---
-title: Button Hover Fill Animation
+title: Button fill animation
 tags: animation,beginner
 ---
 
-Creates a fill animation in a button on hover.
+Creates a fill animation on hover.
 
-- ` transition: 0.3s ease-in-out;` gives the ease into the hover/active state.
-- Change the background color to work with the font color in both states.
-- Elongate the transition by increasing the seconds.
-- Edit `padding: 20px;` to make the button feel larger or thinner.
+- Set a `color` and `background` and use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `background` and `color` of the element when the user hovers over it.
 
 ```html
-<button class="animated-fill-button">Click</button>
+<button class="animated-fill-button">Submit</button>
 ```
 
 ```css
-button.animated-fill-button {
-  transition: 0.3s ease-in-out;
-  color: black;
-  border: black 2px solid;
-  background-color: white;
-  font-size: 14px;
-  text-transform: uppercase;
-  cursor: pointer;
+.animated-fill-button {
   padding: 20px;
-  font-weight: bold;
+  background: #fff;
+  color: #000;
+  border: 1px solid #000;
+  cursor: pointer;
+  transition: 0.3s all ease-in-out;
 }
-button.animated-fill-button:hover,
-button.animated-fill-button:focus,
-button.animated-fill-button:active
-{
-  background-color: black;
-  color: white;
+
+.animated-fill-button:hover {
+  background: #000;
+  color: #fff;
 }
 ```