CSS Examples 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."

The HTML:

<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>
</div>

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 (11)