A list of awesome references, articles, tutorials and videos to learn CSS :active pseudo class.

The :active pseudo-class applies while an element is being activated by the user. Applies to any interaction element. The most common example is clicking on a hyperlink in an HTML document:

See the Pen css :active by freefrontend.com (@cssparadise) on CodePen.

When the four link styling pseudo-classes are used, they are preferably used in the following order: :link, :visited, :hover, and :active. The above order can be easily memorized using phrase "LoVe HAte":

See the Pen a:link, a:visited, a:hover, a:active by freefrontend.com (@cssparadise) on CodePen.

Example. Button with :active pseudo-class:

See the Pen :active button by freefrontend.com (@cssparadise) on CodePen.

Example. Background with :active pseudo-class:

See the Pen :active background by freefrontend.com (@cssparadise) on CodePen.

Browser Compatibility

Can I Use css-sel2? Data on support for the css-sel2 feature across the major browsers from caniuse.com.





  • Styling Buttons, the Right Way https://fvsch.com
    If you’re building a website or a web app, you probably have buttons. And maybe links that look like buttons? Anyway, it’s important to get them right...
    by Florens Verschelde
  • How to Create Stylish CSS Buttons https://speckyboy.com
    In this tutorial, I’m going to run through the basics of 4 different style buttons – flat, border, gradient & shadow (skeuomorphic), and press style buttons. I’ll reset all the CSS so that buttons display consistently across devices, and I’ll style each set of buttons with a :hover and :active state. Without further ado, let’s dig into the HTML...
    by Nick Salloum
  • CSS Link Color, Decoration, Background, States and Buttons Explained https://www.bitdegree.org
    Nowadays we see active links in texts everywhere. They interlink content and make it easier for the readers to reach the information they need. Styling links is as important as providing the correct URL...
    by BitDegree.org