Button Shrink Animation Tutorial

Introduction

This article covers the following tech skills:

In this lab, we will explore how to create a button shrink animation using CSS. The purpose of this lab is to help you understand how to use the :hover pseudo-class and transition property to create a smooth and visually appealing animation when a user hovers over a button. By the end of this lab, you will have a good understanding of how to create simple yet effective animations using CSS.

Button Shrink Animation

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

To create a shrink animation on hover for an element, you can use an appropriate transition property to animate changes and the :hover pseudo-class to trigger the animation. For example, if you want to shrink a button with class button-shrink when a user hovers over it, you can add the following CSS:

.button-shrink {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
  transform: scale(0.8);
}

This will apply a transition effect to all properties of the button when there is a change, and when the user hovers over it, the button will shrink to 80% of its original size. The HTML code for the button is as follows:

<button class="button-shrink">Submit</button>

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.