Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Syntax
selector:hover {
property: value;
transition: property duration ease-function;
}
Key Properties for Button Hover Animations
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.
position properties Properties like bottom and top position an element relative to its container.
Example 1: Scale Up on Hover
In this example, the button will scale up by 20% and change color when hovered
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin: 50px;
}
.scale-up-btn {
background-color: #007bff;
color: white;
padding: 12px 30px;
margin: 20px;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
transform: scale(1);
}
.scale-up-btn:hover {
transform: scale(1.2);
background-color: #28a745;
}
</style>
</head>
<body>
<h3>Scale Up on Hover Effect</h3>
<button class="scale-up-btn">Hover Me</button>
</body>
</html>
A blue button appears that scales up by 20% and changes to green when hovered over, with smooth animation transitions.
Example 2: Fade In on Hover
This example demonstrates opacity transition from semi-transparent to fully visible
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin: 50px;
}
.fade-in-btn {
background-color: #6f42c1;
color: white;
padding: 12px 30px;
margin: 20px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.4s ease;
}
.fade-in-btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<h3>Fade In Effect on Hover</h3>
<button class="fade-in-btn">Hover Me</button>
</body>
</html>
A purple button with initial transparency (60%) appears and becomes fully opaque when hovered, creating a smooth fade-in effect.
Example 3: Slide Up on Hover
This example creates a slide-up animation by changing the position property
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin: 50px;
padding-top: 50px;
}
.slide-up-btn {
background-color: #dc3545;
color: white;
padding: 15px 30px;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
position: relative;
bottom: 0;
transition: bottom 0.3s ease;
}
.slide-up-btn:hover {
bottom: 15px;
}
</style>
</head>
<body>
<h3>Slide Up Effect on Hover</h3>
<button class="slide-up-btn">Hover Me</button>
</body>
</html>
A red button appears that smoothly slides upward by 15px when hovered, creating a lifting animation effect.
Conclusion
Button hover animations enhance user experience by providing visual feedback. Using CSS transitions with the :hover pseudo-class, you can create engaging effects that make your website more interactive and professional.
2K+ Views
