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.

More CSS tutorials

If you like this post, be sure to also check out How to make good use of  CSS 3 animationsMust Read CSS 3 Tutorials 2012, as well as Make your site cool with these CSS 3 techniques.

  • http://www.whatsthebigidea.com David Radovanovic

    Not much is happening in my browser: FF 3.5.3

  • http://www.webhostingsecretrevealed.com Jerry

    @David: I’m using exactly the same version of FF but everything seems okay from my end. Also, tested on IE7, IE8, and Google Chrome, all look okay.

    Anyone having the same trouble as David? Please voice up or shoot me an email at jerry@webhostingsecretrevealed.com.

  • http://www.piticstyle.ro Andrei

    Do you with only one image. In :hover give at the background-position, value bottom!

  • Deoxys

    lol, David, of course it works in FF 3.5.3. You just have to look on the small icon of the first example. That this changes also its color (not only the text), is the whole secret.

    The same with example 2. The only thing you have to watch at is the background, which also changes its color.

  • http://mattrossidesigns.com matt

    nice simple starting point, but combing those redundant styles would be better practice.

  • http://vtwebproperties.com Ed Rooney

    What if I want the bullet image to the right of the text?

  • Pingback: CSS: diverse resurse | CNET.ro

  • http://reflectingthedesigner.com Sarah

    Thanks for this helpful start! I’m trying to implement links in the header of a WP blog I’m working on that has the hover feature. I have both of the images uploaded to my ftp, but am confused on how to get the hover image to show up. The site I’m working on is http://www.unitedcsiblog.com/ and the Twitter button is the first link I’m trying to add.

  • http://wparena.com wparena

    well written and good explanation

  • http://cuaryos.blogspot.com cuaryos

    awesome, may i could mod this script to menu hover in my blog w/o js extension. I,ll try thank for your sharing.

  • http://www.webhostingsecretrevealed.com Jerry

    @cuaryos: Yes of course, feel free to copy anything you want. ;)

  • http://paralooove.tumblr.com ja9

    hello, I am a TUMBLR user.
    I want my page to be organized so I need to have channels for my posts like I want my page to have a channel only for the photos, another one for the posts, qoutes and so on. So this tutorial fits my need but I can’t figure it out, it won’t worked. Can you help me? i’d like to email you the codes of my layout :) THNX.

  • http://offline julien

    it’s not working for me..
    the switch from link/visited to hover doesn’t work.
    when I move my mouse over the link, it just stays the same as link/visited.

    got any tips?
    tnx,
    Julien

  • sanjay

    very useful thank u for sharing

  • laccy

    ty, good trick

  • http://whatuget.blogspot.com Ladida Cafe

    i have to learn more about background position :)

  • http://azgi.blogspot.com azgi

    thx u for sharing, i’ll try it. Hope i can do it well :D

  • http://arazone.eu wax

    takes me one step further, thx a lot.

  • http://currentlyconstructing... muhammad ali

    this tutorial also takes me one step further!
    thanks a lot! this is very useful for me!

    for a long time i have asking and search about changing hover image,background,and colour like this. (i am a newbie in web developing)

    thank you again! may god bless you!

    sorry for my broken english. hehe. i am malaysian student.

  • tony

    good coding

  • http://www.webhostingsecretrevealed.com/web-design/how-to-create-link-with-hover-image-in-plain-css/ Clark

    HELP!!

    how to hover an image and the font-size is lower than the class then the border would not change it’s size??

  • http://www.drshirley.org/index.html Shirley Rollinson

    I have the reverse problem.
    If I use a graphic as part of a link, with a hover effect – on hover or clicking on the link, the graphic seems to add a couple of pixels below, and jumps up and down on the page.
    example at http://www.drshirley.org/rel402/final.html
    CSS at http://www.drshirley.org/rel402/style.css
    How do I stop the images moving on hover or click ?

  • http://www.sex-toys-france.com STF

    Thanks for this CSS tips…

  • http://radioonlinedinle.com/ radioonlinedinle.com

    Goood post. I absolutely love this website. Keep it up!