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
Style the active link with CSS
To style the active links, use the CSS :active selector. The :active pseudo-class targets an element during the exact moment it is being clicked or activated by the user.
Syntax
selector:active {
property: value;
}
Example: Basic Active Link Styling
The following example changes the background color of a link when it's being clicked −
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: blue;
text-decoration: none;
padding: 10px 15px;
border: 2px solid blue;
border-radius: 5px;
display: inline-block;
transition: all 0.2s;
}
a:active {
background-color: green;
color: white;
border-color: green;
}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click and Hold This Link</a>
<p>Click and hold the above link to see the active state styling.</p>
</body>
</html>
A blue bordered button-style link appears. When clicked and held, it turns green with white text and green border.
Example: Multiple Active Elements
You can apply the :active pseudo-class to different elements like buttons and links −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-link {
color: #007bff;
text-decoration: underline;
margin-right: 20px;
}
.demo-button {
background-color: #f8f9fa;
border: 1px solid #ddd;
padding: 8px 16px;
cursor: pointer;
}
.demo-link:active {
color: red;
background-color: yellow;
}
.demo-button:active {
background-color: #28a745;
color: white;
transform: scale(0.95);
}
</style>
</head>
<body>
<a href="#" class="demo-link">Active Link</a>
<button class="demo-button">Active Button</button>
<p>Click and hold either element to see their active states.</p>
</body>
</html>
A blue underlined link and a gray button appear. When clicked, the link turns red with yellow background, and the button turns green with white text and slightly scales down.
Conclusion
The :active pseudo-class provides immediate visual feedback when users interact with clickable elements. It's commonly used with links and buttons to enhance user experience during the brief moment of activation.
Updated on: 2026-03-15T12:17:21+05:30
968 Views
Advertisements