Subtle link effects

As soon as I found hover effects in CSS, I started to use them on everything. I used them on links of course, but also my attitude towards learning about pseudo selectors quickly became:

Hover this header! Hover that paragraph! Hover this entire div!

I’m now realizing that hover may not be the best way to go — just because I have fun putting hover effects on everything, does not mean that the user wants to be tricked into trying to click a link where ever I have added an effect. That seems to be what hover is mainly used for — and web users are trained to know that — if text or an image changes on hover, there is probably a link attached.

In my more overzealous projects — ‘.item h4’ wasn’t even close to being a link.

Just because I can’t put a hover effect on every element I see, does not mean I can’t still have fun with pseudo selectors on links.

With links, I have found that a very subtle change to links almost instantly adds a very clean look on a site. I’ve combined using my favourite hover pseudo selector, with the active pseudo selector.

One of the resources I’ve found really helpful is the W3 school colour picker. I am able to take a colour hex code from my colour palette, and I pop that into the colour picker. Quickly, I have the rgb value if I want to add an alpha (opacity) value to a background. More often though, I am able to find all the hex codes for a range of percentages of the original colour. It really takes the guess work out of complimentary colours, and it guarantees that my selected version of the colour will blend seamlessly with my pre-determined colour palette.

Using this tool, I collect a few hex codes based on the original colour I want to use. If I’m using a light colour, I grab three hex codes that are darker than my original colour. (I do the opposite for a dark colour, and for the middle of the scale, I grab one to two on either side.) These colour variants should still be within close range on the percentage scale — the closer the colours, the more subtle the effect.

I use the original colour for either the text, or for the background, depending on the style of link. For the border or text-shadow (again, depending on the style of link) I use the closest selected colour.

In the hover effect, I use the colour from the previous element’s border (or text shadow) as the main body, and the next colour for that border or text-shadow. The effect is enough that the user will notice a slight change, but it won’t be overwhelming.

I do the same for the active pseudo selector. These new colour percentages can easily be added, especially when using Sass or another pre-processor. When looking at my CSS, it is a slow build of colour — and sometimes, it isn’t colourful at all!

Ahh — sweet subtlety!

This creates a clean look, but more importantly, the user will see an action occur when they make their click, confirming that a click has been registered. This means that it’s also a whole other pseudo selector that I get to play with!

Show your support

Clapping shows how much you appreciated Allye Vice’s story.