4 Ideas For Styling Link Hovers With CSS

Hey all. This is just a quick message to let you know that Theme Thesis is finally on Facebook. Make sure to become a fan. Or a liker. Or whatever. See ya' there! - Matt

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.

1. 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;
   }
   

   Check me out, I’m an example.

2. 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);}
   

   If you hover me, good things will happen.

3. 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;}
   

   I just can’t stay still when you hover me!

4. 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

Stay Updated

Or subscribe via RSS

You'll notice this site talks about the Thesis theme for Wordpress. Don't know what the heck that is? Find out.