diff --git a/animation/01-button-hover/README.md b/animation/01-button-hover/README.md index e4ee37c..3aa1a1e 100644 --- a/animation/01-button-hover/README.md +++ b/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? diff --git a/animation/01-button-hover/desired-outcome.gif b/animation/01-button-hover/desired-outcome.gif index 23083bb..c087042 100644 Binary files a/animation/01-button-hover/desired-outcome.gif and b/animation/01-button-hover/desired-outcome.gif differ diff --git a/animation/01-button-hover/solution/solution.css b/animation/01-button-hover/solution/solution.css index 5fa39a3..5a90ed7 100644 --- a/animation/01-button-hover/solution/solution.css +++ b/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) } diff --git a/animation/01-button-hover/style.css b/animation/01-button-hover/style.css index ec65525..2f803fc 100644 --- a/animation/01-button-hover/style.css +++ b/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; -} +} \ No newline at end of file