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:1.a:hover {2.color:#000;3.-webkit-transition:color500ms ease-in;4.-moz-transition:color500ms ease-in;5.-o-transition:color500ms ease-in;6.transition:color500ms ease-in;7.}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.1.a:hover {text-shadow:1px1px1pxrgba(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.1.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.1.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.
No comments:
Post a Comment