Style hover, focus, and active states differently
Published on:I've been styling :hover
, :focus
, and :active
states the same way for years. I can't remember when I started styling this way. Here's the code I always use:
// Not the best approach. I'll explain why in this article
.selector {
&:hover,
&:focus,
&:active {
// Styles here
}
}
As I paid more attention to keyboard accessibility (and therefore paying more attention to focus), I began to think we should not style hover, focus, and active states the same way.
Hover, focus, and active states should be styled different.
There's a simple reason: They're different states!
Today, I want to show you a magical way to style all three states effortlessly.