30-seconds-of-code/snippets/button-hover-fill-animation.md

title, tags

title	tags
Button Hover Fill Animation	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.

<button class="animated-fill-button">Click</button>

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;
}