update animation1

animation/01-button-hover/README.md

@@ -1,12 +1,12 @@
 # Button Hover
 
-Use a transition to increase the font-size property of the button when you hover your mouse over it.
+Use a transition to scale the button when you hover your mouse over it.
 
 ## Desired Outcome
 
 ![outcome](./desired-outcome.gif)
 
 ### Self Check
-- Does the font-size property change to increase the size?
+- Does the button grow when you hover it?
 - Do other properties of the button remain unchanged?
 - Does the `:hover` pseudo-class trigger the transition?

animation/01-button-hover/solution/solution.css

@@ -9,28 +9,21 @@
 }
 
 button {
-  width: 158px;
-  height: 55px;
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: white;
-  color: black;
-  font-size: small;
+  border-radius: 8px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  font-size: 18px;
+  padding: 16px 24px;
   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;
+  transition: transform .3s ease-in-out;
 }
 
 button:hover {
-  font-size: x-large;
-  cursor: pointer;
+  transform: scale(1.2)
 }

animation/01-button-hover/style.css

@@ -9,12 +9,11 @@
 }
 
 button {
-  width: 158px;
-  height: 55px;
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: white;
-  color: black;
-  font-size: small;
+  border-radius: 8px;
+  border: none;
+  background-color: #2563eb;
+  color: white;
+  font-size: 18px;
+  padding: 16px 24px;
   text-align: center;
-}
+}