All modern browsers have had 100% filter
support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.
a { /* a nice, modern blue for links */ color: #118bee; } a:active { /* Darken on click by 15% (down to 85%) */ filter: brightness(0.85); }
Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):
:root { --color: #118bee; --hover-brightness: 1.2; } a { color: var(--color); } a:active { /* Darken on click */ filter: brightness(var(--hover-brightness)); }
Not my project, but one that’s great to look at for a real-world example of how great modern CSS can be, check out: MVP.css
Original Answer
If you’re using a stack which lets you use Sass or Less, you can use the lighten
function:
$linkcolour: #0000FF; a { color: $linkcolour; } a.lighter { color: lighten($linkcolour, 50%); }
There’s also darken
which does the same, but in the opposite direction.