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.
Summary
Congratulations! You have completed the Button Shrink Animation lab. You can practice more labs in LabEx to improve your skills.
🚀 Practice Now: Button Shrink Animation
Want to Learn More?
- 🌳 Learn the latest CSS Skill Trees
- 📖 Read More CSS Tutorials
- 💬 Join our Discord or tweet us @WeAreLabEx
Top comments (0)