Links are a basic part of the Internet. They’re what keep it connected, really, so why not make these connections fun? A link hover is what happens when you hover your mouse over a link (obviously). Usually you’ll see an underline, or an underline removed, or a different colour. But there are many ways to show people that they can click, so I thought I’d show you four of my favourites.
-
Transition
CSS3 has introduced an awesome new property called “transition”. Don’t be scared when I say CSS3, as this degrades perfectly fine and non-supporting browsers will just show a regular hover (I’m looking at you Internet Explorer). You can use this transition property to make your link change colour slowly. It’s a very subtle but nice-looking effect.
You apply the transition like so:
a:hover { color:#000; -webkit-transition:color 500ms ease-in; -moz-transition:color 500ms ease-in; -o-transition:color 500ms ease-in; transition:color 500ms ease-in; } -
Shadow
Another CSS3 trick. Make sure to specify this along with a colour, as otherwise it won’t degrade nicely at all and your older browser users will get confused.
a:hover {text-shadow: 1px 1px 1px rgba(0,0,0,.4);} -
Move
This is a simple one, but one that I like and use a lot. You can add some cool interactivity if you slightly alter a link’s position on hover.
a:hover {position: relative; top: 2px;} -
Opacity
This is a trick for images, and one that I use all the time. It’s nice to give images a hover state, as not all images are clickable, so you should be letting your readers know which ones are.
a.img {opacity: .5;}You can see an example of this on the social media links at the top of this page. These links also move.
Well there they are. There’s nothing super mind-blowing here, but it’s the little details that count and will make your website a little more special. Are there any techniques that you like to use? Share them in the comments.
image by aidan morgan
