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:
"I'm happy to announce the first Dynamic Drive CSS code contest, hopefully the first of many to come! Show off your CSS talents by submitting an original, CSS example to possibly be featured here. The top 3 submissions will each be awarded with a prize"The single image used:
The CSS:
Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.
Comment Pages 3 of 5 pages « First < 1 2 3 4 5 >
This one is creative. I think I can adapt it for another idea I have. Thanks for sharing.
if you ever hope to retain visitors, avoid using this technique at all costs.
Good, but there is the /media part in the url, but I like it.
text-decoration: none;
background-image: url(media/animated_underline.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #CC9900;
this is not <a href=”www.click2dictionary.com">w</a><a href=”www.takeindirectory.com”>o</a><a href=”www.findindirectory.com”>r</a><a href=”www.click2finding.com”>k</a><a href=”www.click2info.net”>.</a><a href=”www.getindirectory.com”>.</a>
background-image: url(media/animated_underline.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #CC9900;
this is not <a href=”www.click2dictionary.com">w</a><a href=”www.takeindirectory.com”>o</a><a href=”www.findindirectory.com”>r</a><a href=”www.click2finding.com”>k</a><a href=”www.click2info.net”>.</a><a href=”www.getindirectory.com”>.</a>
sorry for before comment :(
text-decoration: none;
background-image: url(media/animated_underline.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #CC9900;
this is not work..
text-decoration: none;
background-image: url(media/animated_underline.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #CC9900;
this is not work..
thanks for the great masterpiece of css link hover
Thanks for this nice work.
Perhaps i will use it!
DD has so cool stuff,yeah!
Perhaps i will use it!
DD has so cool stuff,yeah!
i don't want it be repeated...
how to do this....
does ti just change " repeat-x to norepeat"..?
how to do this....
does ti just change " repeat-x to norepeat"..?
not so bad... :|
