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
:active pseudo class in CSS
The CSS :active pseudo-class represents an element that is being activated by the user. This occurs during the brief moment when the element is being clicked or pressed, typically on links, buttons, or any clickable element.
Syntax
selector:active {
property: value;
}
Example 1: Active Link Color
The following example changes the link color to green when clicked −
<!DOCTYPE html>
<html>
<head>
<style>
a:active {
color: green;
}
</style>
</head>
<body>
<a href="/index.htm">Click here to learn</a>
</body>
</html>
The link appears in normal blue color. When you click and hold the link, it turns green momentarily.
Example 2: Active Font Size Change
This example increases the font size when the link is being clicked −
<!DOCTYPE html>
<html>
<head>
<style>
a {
font-size: 16px;
text-decoration: none;
}
a:active {
font-size: 20px;
}
</style>
</head>
<body>
<a href="/index.htm">Click here to learn</a>
</body>
</html>
The link text temporarily increases from 16px to 20px while being clicked.
Example 3: Active Background on Body
This example changes the background color when anywhere on the page is clicked −
<!DOCTYPE html>
<html>
<head>
<style>
body:active {
background: seagreen;
}
</style>
</head>
<body>
<div>Click anywhere in this window</div>
</body>
</html>
The page background changes to sea green color momentarily when you click anywhere on the page.
Example 4: Active Button Styling
The following example styles a button when it's being pressed −
<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 10px 20px;
font-size: 16px;
background: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:active {
background: red;
transform: scale(0.95);
}
</style>
</head>
<body>
<button>Click Me!!</button>
</body>
</html>
The button appears blue initially. When clicked, it briefly turns red and scales down slightly to show the pressed effect.
Browser Support
| Chrome | Firefox | Edge | IE | Safari | Opera |
|---|---|---|---|---|---|
| 1 | 1 | Yes | 4 | 1 | 5 |
Conclusion
The :active pseudo-class provides immediate visual feedback when users interact with elements. It's commonly used with links and buttons to enhance user experience during the brief moment of activation.
Updated on: 2026-03-15T13:38:43+05:30
835 Views
Advertisements