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
Selected Reading
Fade in on Button hover with CSS
CSS fade-in effects on button hover create smooth visual transitions that enhance user interaction. This effect gradually increases a button's opacity from a lower value to full opacity when the user hovers over it.
Syntax
selector {
opacity: initial-value;
transition: duration;
}
selector:hover {
opacity: final-value;
}
Example: Basic Fade-in on Hover
The following example creates a button that fades in from 50% to full opacity on hover −
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: orange;
color: white;
padding: 10px 20px;
text-align: center;
font-size: 16px;
margin: 5px;
opacity: 0.5;
transition: 0.5s;
display: inline-block;
text-decoration: none;
cursor: pointer;
border: none;
border-radius: 5px;
}
.btn:hover {
opacity: 1;
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
</body>
</html>
An orange button with 50% opacity appears. When hovered, it smoothly fades to full opacity over 0.5 seconds.
Key Properties
| Property | Purpose | Value |
|---|---|---|
opacity |
Controls transparency level | 0 (invisible) to 1 (fully visible) |
transition |
Creates smooth animation | Duration in seconds (e.g., 0.3s, 0.5s) |
:hover |
Triggers effect on mouse hover | CSS pseudo-class |
Conclusion
The fade-in hover effect uses the opacity property combined with CSS transition to create smooth visual feedback. This simple technique significantly improves user experience by providing clear interactive cues.
Updated on: 2026-03-15T12:57:36+05:30
875 Views
Advertisements