Tutorials


CSS :active property


The :active pseudo-class in CSS applies styles to an element at the moment it is being activated by the user. Typically, this means the element is being clicked or pressed. It is commonly used to provide visual feedback to users during the interaction, such as when they click a button or a link.

Syntax

element:active {
  /* styles */
}
  • element: The selector targets the specific element(s) you want to style when it is activated.

How It Works

  1. Basic Usage:

    • You apply styles to an element when it is actively being interacted with, such as a button being pressed or a link being clicked.
    button:active {
  background-color: darkblue;
  color: white;
}
    • In this example, when a user clicks and holds down on a button, its background color changes to dark blue and the text color changes to white.

  2. Links:

    • The :active pseudo-class can be used with links to create visual effects when a link is clicked.
    a:active {
  color: red;
}
    • When a user clicks on a link, the link's text color will change to red.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Active Example</title>
  <style>
    .button {
      padding: 10px 20px;
      background-color: blue;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .button:active {
      background-color: darkblue;
      transform: scale(0.95);
    }

    a {
      text-decoration: none;
      color: blue;
    }

    a:active {
      color: red;
    }
  </style>
</head>
<body>
  <button class="button">Click Me</button>
  <a href="#">Click This Link</a>
</body>
</html>

Explanation:

  • .button:

    • Defines a button with padding, a blue background, white text, and no border.
    • The transition property smoothly animates the background color change.

  • .button:active:

    • When the button is clicked and held, its background color changes to dark blue and it scales down slightly (transform: scale(0.95)) to give a pressed effect.

  • a:

    • Styles links with no text decoration and a blue color.

  • a:active:

    • When a link is clicked, its text color changes to red.

Important Points

  1. Default Behavior:

    • The :active pseudo-class only applies styles while the element is actively being interacted with. Once the user releases the mouse button or the interaction ends, the styles revert to their original state.

  2. Order of Pseudo-Classes:

    • When using :active along with :hover or :focus, the order in which pseudo-classes are applied matters. For example, if you style :active and :hover differently, the :active styles take precedence when the element is clicked.
    a:hover {
  color: blue;
}

a:active {
  color: red;
}
    • Here, the link will turn red when actively clicked, but blue when hovered over.

  3. Interaction with JavaScript:

    • While :active is a CSS feature, JavaScript can be used to programmatically add or remove classes that affect the active state of elements.

  4. Visual Feedback:

    • The :active pseudo-class is useful for providing immediate visual feedback during user interactions, enhancing the overall user experience.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about