Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create button hover animation effect using CSS?
The hover animation effect in CSS refers to the change in appearance of an element when the mouse pointer is over it. We use CSS to create various animation effects on hover, such as scaling, fading, sliding, or rotating elements.
Properties of button hover animation effect
transform − This property allows you to scale, rotate, or translate an element.
opacity − This property sets the transparency level of an element, where 1 is fully visible and 0 is completely transparent.
background-color − This property sets the background color of an element.
color − This property sets the text color of an element.
transition − This property controls the animation effect between two states, such as the default state and the hover state.
bottom and top − properties position an element relative to its container.
Create button hover animation effects using CSS
Button hover animations are a great way to add visual interest to the website. To create a button hover animation effect using CSS, we commonly use the :hover pseudo-class selector in combination with CSS transitions or keyframe animations. By using the following steps, we can easily create button hover animation effects.
Step 1 − Create HTML code for gooey balls animation
Step 2 − Add CSS styling to the button
Step 3 − Add the hover animation effect
In this article we will explore three examples to create button hover animation effects in CSS.
Example 1 - Scale Up on Hover
In this example, the button will have a blue background color and white text. When the mouse pointer is over the button, the button will scale up by 20% using the transform property with a smooth transition over 0.5 seconds and background color will be green.
<!DOCTYPE html>
<html>
<head>
<style>
Body{
text-align:center;
}
.scale-up-btn {
background-color: blue;
color: white;
padding: 10px 30px;
margin:20px;
border: none;
transition: transform 0.5s ease;
transform: scale(1);
border-radius:10px;
}
.scale-up-btn:hover {
transform: scale(1.2);
background-color: green;
}
</style>
</head>
<body>
<h2>Button hover animation effect using CSS</h2>
<h3>Scale Up on Hover effect</h3>
<button class="scale-up-btn">Hover Me</button>
</body>
</html>
Example 2: Fade In on Hover
In this example, the button will have a blue background color and white text with an initial opacity of 0.5. When the mouse pointer is over the button, the opacity will increase to 1 with a smooth transition over 0.5 seconds.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.fade-in-btn {
background-color: blue;
color: white;
padding: 10px 20px;
margin:15px;
border: none;
opacity: 0.5;
transition: opacity 0.5s ease;
}
.fade-in-btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<h2>Button hover animation effect using CSS</h2>
<h3>Fade In Effect on Hover</h3>
<button class="fade-in-btn">Hover Me</button>
</body>
</html>
Example 3: Slide Up on Hover
In this example, the button will have a blue background color and white text with a position set to relative. The bottom property is set to 0, meaning the button is positioned at the bottom of its container. When the mouse pointer is over the button, the bottom property will increase to 20px, causing the button to slide up with a smooth transition over 0.5 seconds.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.slide-up-btn {
background-color: blue;
color: white;
padding: 15px 30px;
border: none;
position: relative;
bottom: 0;
transition: bottom 0.5s ease;
border-radius:10px;
}
.slide-up-btn:hover {
bottom: 20px;
}
</style>
</head>
<body>
<h3>Slide Up Effect on Hover</h3>
<button class="slide-up-btn">Hover Me</button>
</body>
</html>
Conclusion
Button hover animation effects are a great way to add visual interest to the website. By using CSS, We can create dynamic and engaging effects that will make the website stand out. With a few lines of code.
2K+ Views
