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
Set a rounded active and hover button with CSS
The CSS :hover pseudo-class allows you to add interactive effects when users hover over elements, while the border-radius property creates rounded corners. Combining these with the .active class creates visually appealing navigation buttons with distinct states.
Syntax
/* Hover effect */
selector:hover {
property: value;
}
/* Active state */
selector.active {
property: value;
}
/* Rounded corners */
selector {
border-radius: value;
}
Example: Rounded Active and Hover Buttons
The following example creates a navigation menu with rounded buttons that have different styles for normal, active, and hover states −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
margin: 20px;
}
.demo a {
color: #333;
padding: 10px 20px;
text-decoration: none;
border-radius: 25px;
margin: 0 5px;
background-color: #f0f0f0;
border: 2px solid #ddd;
transition: all 0.3s ease;
}
.demo a.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.demo a:hover:not(.active) {
background-color: #e9ecef;
border-color: #007bff;
color: #007bff;
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<div class="demo">
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/services" class="active">Services</a>
<a href="/portfolio">Portfolio</a>
<a href="/contact">Contact</a>
</div>
</body>
</html>
A horizontal navigation menu with rounded buttons appears. The "Services" button is highlighted in blue (active state). When hovering over other buttons, they change to a light blue border and text color with a smooth transition effect.
Key Properties Explained
| Property | Purpose |
|---|---|
:hover |
Applies styles when mouse hovers over element |
.active |
Indicates the current/selected page or state |
border-radius |
Creates rounded corners on buttons |
transition |
Adds smooth animation between states |
:not(.active) |
Excludes active elements from hover effects |
Conclusion
Combining :hover, .active classes, and border-radius creates professional-looking navigation buttons. The transition property adds smooth animations, while :not(.active) ensures hover effects don't interfere with the active state.
Updated on: 2026-03-15T13:07:25+05:30
1K+ Views
Advertisements