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 fading buttons with CSS?
To crate fading buttons on a web page, use the opacity property. To enable this feature on hovering the mouse cursor, use the :hover selector. To fade in on hover, set the opacity to 1 on hover when the actual button is set to opacity less than 1. This works the opposite for fade out on hover.
Fade out on hover
Set the opacity to less than 1 to implement the fade out concept. To implement it on hover, use the :hover selector −
button:hover {
opacity: 0.5;
}
Example
The following is the code to create fading buttons with CSS that fade out on hover −
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: rgb(255, 175, 222);
border: none;
color: black;
padding: 25px;
text-align: center;
font-size: 20px;
margin: 4px 2px;
transition: 0.3s;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
opacity: 1;
}
button:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Fading Button Example</h1>
<button>Hover Here</button>
<p>Hover on the above button to see background fade on button</p>
</body>
</html>
Fade in on hover
Set the opacity to 1 to implement the fade in concept. To implement it on hover, use the :hover selector −
button:hover {
opacity: 1;
}
Example
The following is the code to create fading buttons with CSS that fade in on hover −
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: rgb(255, 175, 222);
border: none;
color: black;
padding: 25px;
text-align: center;
font-size: 20px;
margin: 4px 2px;
transition: 0.3s;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
opacity: 0.5;
}
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<h1>Fading Button Example</h1>
<button>Hover Here</button>
<p>Hover on the above button to see background fade on button</p>
</body>
</html>
Updated on: 14-Dec-2023
230 Views
Advertisements