diff --git a/animation/01-button-hover/README.md b/animation/01-button-hover/README.md
new file mode 100644
index 0000000..e4ee37c
--- /dev/null
+++ b/animation/01-button-hover/README.md
@@ -0,0 +1,12 @@
+# Button Hover
+
+Use a transition to increase the font-size property of the button when you hover your mouse over it.
+
+## Desired Outcome
+
+
+
+### Self Check
+- Does the font-size property change to increase the size?
+- Do other properties of the button remain unchanged?
+- Does the `:hover` pseudo-class trigger the transition?
diff --git a/animation/01-button-hover/desired-outcome.gif b/animation/01-button-hover/desired-outcome.gif
new file mode 100644
index 0000000..23083bb
Binary files /dev/null and b/animation/01-button-hover/desired-outcome.gif differ
diff --git a/animation/01-button-hover/index.html b/animation/01-button-hover/index.html
new file mode 100644
index 0000000..35b6bce
--- /dev/null
+++ b/animation/01-button-hover/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Button Hover
+
+
+
+
+
+
+
+
diff --git a/animation/01-button-hover/solution/solution.css b/animation/01-button-hover/solution/solution.css
new file mode 100644
index 0000000..5fa39a3
--- /dev/null
+++ b/animation/01-button-hover/solution/solution.css
@@ -0,0 +1,36 @@
+#transition-container {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-family: Arial, sans-serif;
+}
+
+button {
+ width: 158px;
+ height: 55px;
+ border: 1px solid black;
+ border-radius: 5px;
+ background-color: white;
+ color: black;
+ font-size: small;
+ text-align: center;
+}
+
+/* SOLUTION */
+
+/* disclaimer: duplicating the `button` element here isn't best practice.
+In your solution you probably put it right inside the existing `button`,
+which _is_ the best practice.
+We separated it out here to make it extra clear what has changed. */
+
+button {
+ transition: font-size 1s ease-out 0.25s;
+}
+
+button:hover {
+ font-size: x-large;
+ cursor: pointer;
+}
diff --git a/animation/01-button-hover/solution/solution.html b/animation/01-button-hover/solution/solution.html
new file mode 100644
index 0000000..84e6599
--- /dev/null
+++ b/animation/01-button-hover/solution/solution.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Button Hover
+
+
+
+