From 6abebfe811f263c80d11ed3cb1ad1e12dfe7f661 Mon Sep 17 00:00:00 2001 From: Hilary Matusiak Date: Thu, 8 Oct 2020 13:48:11 -0400 Subject: [PATCH] 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 + +``` + +```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; +} +```