CSS :active Pseudo Class

CSS :active Pseudo-Class

The :active pseudo-class in CSS applies styles when an element is being clicked or activated by the user.

1. Basic Usage

✅ Changing Button Color When Clicked

button:active {
  background-color: red;
}

✅ The button turns red while being clicked.

2. Applying to Links (<a> Tags)

✅ Styling Active Links

a:active {
  color: green;
  text-decoration: underline;
}

✅ The link turns green when clicked.

3. Applying to Any Element

✅ Making a Box Shrink on Click

.box:active {
  transform: scale(0.95);
}

✅ The box shrinks slightly when clicked.

4. Combining with Other Pseudo-Classes

✅ :hover vs :active

button:hover {
  background-color: blue;
}
button:active {
  background-color: red;
}

✅ The button turns blue when hovered and red when clicked.

5. When to Use :active?

✔ Interactive buttons
✔ Clickable elements
✔ Custom UI effects

6. Example – Animated Click Effect

button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:active {
  transform: scale(0.9);
  background-color: darkgray;
}

✅ The button shrinks slightly and changes color when clicked.