How to create link with hover image in plain CSS

What’s a hover?

Definition quoted from UWStout.edu:

‘Hover’ is an effect that occurs when you place the cursor over a link of any kind. The link can be coded to respond to the hover by changing color, showing a new graphic, or even playing a sound file.

The hover effect improves web usability and helps web owners to direct their web traffics. When you wish your web users to pay extra attention to a special link, a good way to do so is to create a link with attractive hover effect. A simple hover effect like this (a simple underline and change of text color) indicates those text are ‘click-able’ and improves web interactions. However, changing text color and styles (underline/overline/bold) is very basics and there are a lot more can be done with hover.

In this article, I’m going to show how you can create good looking links with hover effect.

Example 1: Link with hover button

First, a look at the working example (place mouse over the link to see how it works – change of icon at the side).

Example 1 – Link with hover button image

This is the completed version of what will be built in this example.

How we create it in plain CSS?

The Button Image

Step 1, as you can see, we need a arrow icons in two different versions. In our example, I used red (#CC3300) as the default link button; and grey (#333333) for the hover effect. Such button can be easily made using any image editing software.

We now have the red color button (say, b1.png) and the rey color (button say, b2.png). Merge these two into one image file with b1.png on top of b2.png. This will be our final image for the link. Name it (say, x.png) and upload the desired location (for my case, I placed it in my WP template folder).

For your reference:

b1.png , b2.png , and x.png

The CSS Code

Next, on the CSS code. Basically what we want to achieve is to indent the link text slightly to the right to make space for the button; and in the same time, display a different image when the link is in hover state. These are pretty fundamental stuffs except that we need a little twist on the background position. The trick is to show the top part of the image (the red button) for the original link; and when hover, displace the background image with a -11px (it might differs on your website) margin to show the grey button.

.x a {
color: #cc3300;
padding-left: 14px;
font-weight: bold;
background-image: url(images/x.png);
background-position: 0 2px;
background-repeat: no-repeat;
}

.x a:hover {
color: #333333;
padding-left: 14px;
font-weight: bold;
background-image: url(images/x.png);
background-position: 0 -11px;
background-repeat: no-repeat;
}

Implementation

To show off this hover effect, simply insert class x into the designated area. Here’s an example on how you can do it.

<p class=’x'><a href="http://www.webhostingsecretrevealed.com">Homepage</a></p>

Example 2: Link in hover background

With the same concept, there are endless ways you can make your links look cool. Here’s another example on what we can do with the hover effects with a slightly different method. Again, have a look on the finished version.

Example 2 – Link in hover background

In this example, what I will do is to create a button-liked hyperlink where the background will change when users place their mouse over it.

How we create it in plain CSS?

The background images

First, create two images of rounded rectangle. For demonstration purpose, we will not merge these two images in this example. We’ll name the red (#CC3300) rectangle as b1.png; and the maroon (#9F2800) rectangle as b2.png.

The CSS Code

Next, here are the codes for your style sheet (we are naming the class ‘y’ in this second example).

a.y {
width: 280px;
height: 42px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(images/b1.png);
background-repeat: no-repeat;
}

a.y:hover {
width: 280px;
height: 42px;
color: #FFFFFF;
padding: 10px;
font-weight: bold;
text-decoration:none;
display: block;
background-image : url(images/b2.png);
background-repeat: no-repeat;
}

Implementation

To display the link, simple insert the class (y) into the <a href> tag in your source code. Example:

<a href="http://www.webhostingsecretrevealed.com" class="y" >Homepage</a>

Wrapping up

I hope this article brought you valuable information and inspired some of you to use CSS in an creative way. If there’s any other points you think I should add in this guide, feel free to leave your ideas in the comment section.