CSS Examples Borderize links onMouseover

Date: 10/14/2004 Borderize links onMouseover

Author: CSS Drive

The goal of CSS link effects is often to draw attention to a link when the user hovers over it. Using the pseudo class "a:hover", this one applies a border to the target link, and for good measure, changes its background color as well. Notice how by setting the links to "display: block", the entire link area- and not just the text- becomes "active."


<div id="borderlinks">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>

The CSS:

#borderlinks a{
padding-left: 4px;
display: block;
width: 150px;
color: black;
text-decoration: none;
border: 1px solid white;

#borderlinks a:hover{
border: 1px solid black;
background-color: lightyellow;

Comments (10)

Good post! Thanks for the info

#1: Nikola on 08/26 at 12:15 PM

Yeah. great post. thanks

#2: gratis on 09/04 at 08:56 PM

simple and useful.

#3: roses on 09/20 at 07:36 AM

Great one.I am using it : ) thanks

#4: John on 11/21 at 12:59 PM

Wonderful article, thank you so much.

#5: videolar on 12/04 at 03:58 PM

Thanks, very simple and usable and it looks great too. I love css and what you can do with it. It is much simpler than using javascript which I have a lot of trouble understanding.
Acne Treatments

#6: Jake on 12/13 at 08:25 AM

I love how easily you can use CSS to get some really cool mouseover effects. Thanks for the useful tips - I love your site, keep up the great work. - Editor (Make Money Online Site)

#7: Jenny P. on 01/15 at 10:41 AM

Damnit I have been trying to find that code forever - thanks~

#8: Money on 02/25 at 05:22 AM

thanks css drive. you are best!

#9: emlak on 03/04 at 02:01 PM

nice and simple code thanks i was looking for this

#10: wayzee on 05/04 at 10:50 AM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site