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
Specifications
- CSS :active pseudo-class Selectors Level 3 - W3C Candidate Recommendation
- CSS :active pseudo-class Selectors Level 4 - Editor’s Draft
References
- :active https://developer.mozilla.org
- :active https://css-tricks.com
- :active https://tympanus.net/codrops
Articles
-
An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements https://www.smashingmagazine.com
Without getting overcomplicated with the W3C’s technical definition, a pseudo-class is basically a phantom state or specific characteristic of an element that can be targeted with CSS. A few common pseudo-classes are
:link,:visited,:hover,:active,:first-childand :nth-child. There are more, and we’re going to see them all in a minute... -
Meet the Pseudo Class Selectors https://css-tricks.com
Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them...
Tutorials
-
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...
-
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
:hoverand:activestate. Without further ado, let’s dig into the HTML... -
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...