37 lines
858 B
Markdown
37 lines
858 B
Markdown
---
|
|
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;
|
|
}
|
|
```
|