Button Fill Animation

Introduction

In this lab, we will learn how to create a fill animation on hover for a button using CSS. We will use the :hover pseudo-class to change the background and color of the button when the user hovers over it, and also add a transition effect to animate the changes. By the end of this lab, you will be able to enhance the user experience on your website by adding engaging hover effects to your buttons.

Skills Graph

Button Fill Animation

index.html and style.css have already been provided in the VM.

To create a fill animation on hover, you can set the color and background properties and apply an appropriate transition to animate the changes. To trigger the animation on hover, use the :hover pseudo-class to change the background and color properties of the element. Here's an example code snippet:

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

.animated-fill-button {
  padding: 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

.animated-fill-button:hover {
  background: #000;
  color: #fff;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Button Fill Animation lab. You can practice more labs in LabEx to improve your skills.