• Horizontal CSS Menus
• Vertical CSS Menus
• Image CSS
• Form CSS
• DIVs and containers
• Links & Buttons
• CSS3 demos
• Other
• Browse All

• Hosting Discounts

• Layouts Index
• Two Columns
• Three Columns
• Fixed layouts
• Liquid Layouts
• CSS Frames

CSS Library: Links & Buttons: Here

Animated link underlines

Author: Kieren Harding

This fun CSS code adds an animated underline to links on the page when the mouse rolls over them to grab visitors' attention!

Demo:

"Visit our site Best of Budgets where we share our best advice and tips on budgeting, saving, and making money online! Start with our Online Surveys" article to see how to make $500/mon filling out fun surveys at home."

The single image used:

The CSS:

<style type="text/css"> a:link { color: #C37108; white-space: nowrap; text-decoration: none; } a:visited { text-decoration: none; color: #C37108; } a:hover { text-decoration: none; background-image: url(media/animated_underline.gif); background-repeat: repeat-x; background-position: 100% 100%; padding-bottom: 3px; color: #CC9900; } a:active { text-decoration: none; } </style>

Copyright 2006-2016 Dynamic Drive