Link Hover Effects with CSS

Links are the integral part of internet. The World Wide Web exists because of hyperlinks. So, while designing our websites, it’s important to give high priority to links styling.

How do we style our links? I have seen that in many websites, the links are styled with distinct colors and background other than normal text. Surely, the basic design calls for distinct styling for links which is easily differentiable from other texts. Many designers like to remove the default underline from anchors initially and make it appear only on mouse hover. This effect is created with hover pseudo class in CSS. Other common uses of the hover pseudo class are to change the link color, background color, style the fonts and introduce dotted and over-lines. Of late, designers are becoming more creative by introducing border-radius, box-shadows, text-shadows, etc. in hover class.

Today, I am going to create some cool link hover effects with pure CSS. Of course, I will be using some CSS3 properties here and before your point out, let me admit that some of the effects will not work with older browsers specially internet explorer. But nothing to worry, it will degrade gracefully and will not affect your user experience.

So ladies and gentlemen, before I begin, why don’t you have a look and judge whether these so called cool effects are really cool or not?

CSS link hover effects demo

OK, now if you think that these effects are worth implementing, read on!

Well, I have used nothing more than hover pseudo classes for creating these effects. And if you are not interested in knowing how to create these and straightaway want to view the codes, all the files used in the demo page are available for download at the end of this tutorial.

Basic Link Style

For each hover effect, I have used a little subtle animation. This is because I feel that a little delay makes the effect smoother and eye-catching. Here is the CSS code for all the anchors in the web page.

a
{
text-decoration: none;
padding: 5px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

First thing I am doing here is to remove the underline and add some padding. Other lines are for introducing a default delay of 0.5 seconds with CSS3 transition property. You still need to add vendor prefixes for better compatibility with all browsers. For the sake of simplicity, I will use the CSS3 properties without vendor prefixes, but don’t forget to add them in your actual implementation.

Let’s now start with our first link hover effect.

Smooth Background

In the first link hover effect, we are simply introducing a background color and changing the font color. You may wander – what’s so special here? Only interesting thing is the different delay timing and easing methods for text color change and background color appearance.

smooth-background

.smooth
{
color: #990000;
transition: color .2s ease-out, background 0.5s ease-in;
}
.smooth:hover
{
color: #FFFFFF;
background-color: #336699;
text-shadow: none;
}

As you can see that for the link color, we have defined the transition delay of 0.2 second while for background it is 0.5 second. This difference makes the links more effective and attractive on hover.

Move Right

Our second link hover effect is ‘move right’. As you mouse hover, the text shifts its position in right direction. This combined with the background change gives an eye catching effect especially with hyperlinks in a list.

move-right

.move-right
{
color: #FFFFFF;
font-family: 'PT Sans Narrow';
background-color: #666666;
text-shadow: none;
}
.move-right:hover
{
padding-left: 25px;
background-color: #9A3234;
}

Note here that I am not defining the transition delay because it has been universally defined for all hyperlinks for this web page. Since, by default, we are using text-shadow in this division, we are removing it with ‘text-shadow: none’.

Subtle Glow

In this effect, we are using CSS3 text-shadow property to introduce a subtle glow on text on mouse hover. At the same time, we are increasing the font size with CSS3 transform property.

subtle-glow

.style-glow
{
color: #FFFFFF;
font-weight: 700;
font-size: 18px;
}
.style-glow:hover
{
text-shadow: 0 0 15px #FFFFFF;
transform: scale(1.05);
}

As you can see, we are scaling the link by 5% here (1.05 means 105%, i.e. increase by 5%).

Scale Up

With this link hover effect, we are introducing the text shadow color and changing the font color to make the text appearing scaling up. Note however, that the font size is not changing, it is only the illusion.

scale-up

.scale:hover
{
color: #FFFFFF;
text-shadow: 2px 2px 7px #000000;
}

Come-Up 3D

This is with a small variation in the previous effect. Here, the effect of appearing above the web page is in 3D. This is possible with two text shadows applied in the anchor text.

come-up

.come-up:hover
{
text-shadow: rgb(150, 150, 150) 1px 3px 0px, rgb(171, 168, 168) 1px 13px 5px;
}

Can you believe this effect is possible with just one line of code?

Slide Up

The next two text hover effects are a little tricky. I am using inset box-shadow property to create the animation effect. In first example, as you hover your pointer on links, the background slides up and a different color appears. Let’s have a look at the CSS code first.

slide-up

.slide-up
{
color: #000000;
margin: 20px;
box-shadow: inset 0 100px 0 0 #FF0000;
background: #FFFF00;
}
.slide-up:hover
{
box-shadow: inset 0 0 0 0 #FF0000;
}

Initially, we have defined the inset box-shadow to cover the entire background. This is possible because here the vertical shift of inset shadow is defined as 100px with zero blur. So, by default the background color is the color of inset shadow. On hover, this vertical shift becomes zero and the original background color appears giving an illusion of slide effect.

Highlighter

In our last example, we are using the similar technique we used in our previous effect. Here, initially we are defining the inset box-shadow with -300px shift in horizontal direction. On hover, this value changes to 300px.

highlight

.highlighter
{
color: #000000;
border-radius:20px;
padding: 20px;
margin: 20px;
box-shadow: inset -300px 0px 10px 10px #CCCCCC;
background: #FFFFFF;
}
.highlighter:hover
{
box-shadow: inset 300px 0px 10px 10px #CCCCCC;
}

The shadow color is same as the background color of division. The background color of links is lighter than the shadow color. Also, along with horizontal shift, we are also defining blur and spread value as 10px. The result is background color flashing from left to right on hover.

Conclusion

As you can see, with a little bit of creativity and CSS3, we can change the look and feel of the hyperlinks. And you don’t require a rocket science; it is all possible with a few lines of pure CSS.

In case you wish to download, I have kept all the files used in this article in zip folder.

Download Link Hover Effects Files

Tagged on: ,

4 thoughts on “Link Hover Effects with CSS

  1. Pritam Patil

    I was just searching out the same and got on your web page in very simplified manner :) You write very well Gunjesh :) Keep it up ! Hope to see more from you in css design . Please try to write code for the wordpress theme to customize as per our need . Thank You :)

Leave a Reply