4 Uber Cool Css Techniques For Links

written on:24 Apr, 2008 by Alen Grakalic

4 Uber Cool Css Techniques For Links

I thought of writing a series of tutorials for various link techniques. When I start writing I realized that they are pretty simple (yet effective :) ) and it might be better to have them summarized.
Links (A tags) are one of the most important elements on your document. There wouldn't be any navigation without it, would it :)? The main feature that made following techniques possible is cross browser :hover pseudo class support. Each of these techniques is pure css, no ugly hacks, no JavaScript.

Download link techniques

Pure Css Tooltip

To make this work you'll need markup like this:

<a href="#">Title <span>Tooltip</span></a>

Anchor is given position:relative and span is placed absolute and styled separately. We initially hide the span element and show it only when user hovers the link (using a:hover span selector).
Here's the css:

a{
	z-index:10;
	}
a:hover{
	position:relative;
	z-index:100;
	}			
a span{
	display:none;
	}
a:hover span{
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;			
	}

See this technique in action

Pure Css Image Gallery

In this trick we'll show large images when thumbnails are rolled over. We're using unordered list. In each list item we'll place an anchor eith two images, one thumbnail and one full size. Full size image is placed inside an span that we initially hide. When thumb is rolled over we set display block to hidden span and that way we display a large image.

Html structure looks like this:

<li>
	<a href="#">
		<img src="images/02_1s.jpg" alt="gallery thumbnail" />
		<span><img src="images/02_1.jpg" alt="gallery image" /></span>
	</a>
</li>

and css:

ul#gallery, ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
	}
ul#gallery{
	width:400px;
	height:375px;
	position:relative;
	background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
	}			
ul#gallery li{
	float:left;
	display:inline;
	margin-top:300px;
	}								
ul#gallery a span{
	display:none;
	}
ul#gallery a:hover{
	background:none;
	z-index:100;
	}	
ul#gallery a:hover span{
	position:absolute;
	width:400px;
	height:300px;
	float:left;
	top:0;
	left:0;
	display:block;
	}

See this technique in action

Pure Css Image Resizer

I once wrote about thumbnail resizing where image's visible area was resized. This trick will display larger image on mouse over and give an effect of real resized image. To achieve this we'll use similar set up as in previous example - two images, one small and one large, inside one anchor tag. Larger image is initially hidden, showed only on roll over. Since the large image is placed on top of the small one, it looks like the image has been scaled up.

Html:

<li>
	<a href="#">
		<em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em>
		<span><img src="images/02_1m.jpg" alt="gallery image" /></span>
	</a>
</li>

Css:

ul#gallery, ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
	}
ul#gallery{
	margin:2em 0;
	}			
ul#gallery li{
	float:left;
	display:inline;
	margin-right:5px;
	}								
ul#gallery a{
	float:left;
	display:inline;
	position:relative;
	}	
ul#gallery a:hover{
	background:none;
	z-index:100;
	}	
ul#gallery a span{
	display:none;
	}
ul#gallery a:hover span{
	float:left;
	display:block;
	cursor:pointer;
	}
ul#gallery a:hover em{
	display:none;
	}				
ul#gallery a img{
	border:1px solid #999;
	padding:2px;
	background:#fff;
	}	
ul#gallery a:hover img{
	border:1px solid #000;
	}

See this technique in action

3D Button Effect

This is a simple effect of a button being pushed. We need an anchor with nested span. Top and left borders are "lightened" while right and bottom are "shaded". To add more shading we'll add right and bottom border to the span as well. On mouse over we invert the border colors. Changing borders will offset the nested span one pixel to the down and to the right.
Note, In my example I have used floated anchors to get desired height, but this can be done on inline anchors as well.

Html looks like this

<a href="#" class="button"><span>Roll over here</span></a>

and css

a.button{
	float:left;
	font-size:110%;
	font-weight:bold;				
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	color:#333;		
	width:auto;
	}	
a.button:hover{	
	border-top:1px solid #333;
	border-left:1px solid #333;
	border-right:1px solid #999;
	border-bottom:1px solid #999;	
	color:#333;					
	}	
a.button span{
	background:#d4d0c8 url(images/bg_btn.gif) repeat-x;			
	float:left;
	line-height:24px;
	height:24px;	
	padding:0 10px;							
	border-right:1px solid #777;
	border-bottom:1px solid #777;					
	}		
a.button:hover span{
	border:none;						
	border-top:1px solid #777;
	border-left:1px solid #777;		
	background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;	
	cursor:pointer;	
	}

See this technique in action

About the author:

cssglobe's image Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for contract work.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Comments

Ivan on 24 Apr, 2008 wrote:

Very nice techniques.
Steven Snell on 25 Apr, 2008 wrote:

I really like the gallery. Thanks.
Joao Oliveira on 25 Apr, 2008 wrote:

Nice techniques!
The gallery is very cool!
Thanks!
Rafael Masoni on 25 Apr, 2008 wrote:

Cool. I like the tooltip.
Thanks for sharing!
DotNetYuppie on 25 Apr, 2008 wrote:

Great techniques. I wanted to mention, though, that the first technique (Pure Css Tooltip) may not look exactly how you want it in browsers that aren't CSS-enabled. I'm not sure if I can think of a better method, but it's good to keep in mind that the span tags won't display:none in browsers like Lynx or with users that are visually impaired.
Majesticskull on 25 Apr, 2008 wrote:

Very nice! Thanks!
nikola on 25 Apr, 2008 wrote:

nice article and techniques ...
Toni on 25 Apr, 2008 wrote:

An article very good, to see that useful for teaching the basics and I am waiting to similar you can make. Thank you very much.
b0li on 25 Apr, 2008 wrote:

great techniques
Peter Gasston on 25 Apr, 2008 wrote:

Nice techniques, but do they really count as 'pure' if you have to put extra mark-up in your code to make them work?
david on 25 Apr, 2008 wrote:

might want to combine the image for the two button states and use background position, instead of making two http requests.
Welcome to Paradise on 25 Apr, 2008 wrote:

Thanks mate, since I'm too crazy 'bout CSS and this article just perfectly suites me. :)
Tiago Celestino on 25 Apr, 2008 wrote:

Very good the tutorial.

The CSS is very crazy! :)
Beyond Random on 25 Apr, 2008 wrote:

great list!!
Michael on 26 Apr, 2008 wrote:

Great. Absolutely great. Thanks !
Luis Henrique on 27 Apr, 2008 wrote:

Very nice!!
Jakub Slaby on 27 Apr, 2008 wrote:

great stuff!
Binny V A on 27 Apr, 2008 wrote:

Nice methods! But in practice, using Javascript for some of these effects may be better, IMO.
Reynder Bruyns on 28 Apr, 2008 wrote:

Good examples en clean coding. Bookmarked.
Erik on 29 Apr, 2008 wrote:

Wow, great techniques. I was actually searching for pure CSS tooltip code, now I found it. Thanks!
Aminur RAHMAN [aka Tom R] on 29 Apr, 2008 wrote:

great tutorial.
zoel on 29 Apr, 2008 wrote:

must be use it ;-) thanx
Nout van Deijck - Blog <3.14 /> on 29 Apr, 2008 wrote:

I like this article very much!
Thank you for all information, CSS Globe!!!
I live your unburdened and useful posts!
land surveyors united on 1 May, 2008 wrote:

i love all four. wondering if the 3D button effect could be implemented on a ning.com network. any ideas?
Christopher Kata on 1 May, 2008 wrote:

Hi Alen,
These techniques are excellent! I'm the CTO for Spark Internet Marketing and I'm currently looking for contract designers to compliment our outstanding design team. If you're interested in extra work - please feel free to contact me!
Martin Sarsini on 1 May, 2008 wrote:

quite an old style these kind of 3d buttons... no?
Matt on 1 May, 2008 wrote:

Great post, however as it was already noted, some of these might be better off with JS. The tooltip for instance, while it is great that it can be achieved without the use of JS, it also is not very semantic. Having tons of spans for links which when viewed without CSS looks a little strange might not be the best approach.

It would be in that case better to use what we already have available to us, the "title" attribute for anchors and display they information via DOM scripting.
CT on 3 May, 2008 wrote:

exelente !!
Denver Web Design on 4 May, 2008 wrote:

The CSS button is absolutely great, thanks!
Kurzy Pocasie Slovniky on 8 May, 2008 wrote:

Thankx for file for download ;)
SARAH on 8 May, 2008 wrote:

This is great. Thanks for sharing with us.
Dallas Web Designer on 8 May, 2008 wrote:

These are great. There a lot of different things that you can use with css.
Vibhu Satpaul on 9 May, 2008 wrote:

I really Like these techniques and they are helping me and others deploy them on thier present domain perfectly.

Thank you very much.
Mark Wilmot on 13 May, 2008 wrote:

Should use sliding doors on the button, better yet a sprite sheet.
nice on 13 May, 2008 wrote:

Nice Man.. i really like these methods.....
love all
Drew Aldrich on 13 May, 2008 wrote:

Your contact me form gives back an error. Please email me if you get a chance
Nels on 13 May, 2008 wrote:

For the 3D CSS button, you might want to try using the same image for the background of the span, but just change the background position to a negative value. This will avoid the inevitable instant of loading the image because it will already be loaded but hidden. Here's an example:
http://www.wellstyled.com/css-nopreload-rollovers.html
Fouad Masoud on 15 May, 2008 wrote:

i've been working on little stuff like this for a while now.
http://www.some1ne.com
Freelance Web Design on 16 May, 2008 wrote:

Great stuff, I especially like the button.
javier on 19 May, 2008 wrote:

Muchas gracias... great! :D
Mr.Ro on 20 May, 2008 wrote:

Cool techniques.Thanks
Web Design Liverpool on 27 May, 2008 wrote:

Nice hover over effect.
Posicionamiento on 27 May, 2008 wrote:

Good enough to digg :)
evodesign on 28 May, 2008 wrote:

Thanks for the article.
Nice techniques.
sidhu on 28 May, 2008 wrote:

this is very nice and usefull
James Socol on 30 May, 2008 wrote:

Very nice techniques! I'm a big fan of the pure-CSS tooltip. It gives you great options for different media-types, too, much more flexible than using pseudoselectors and generating content.
Media Surgery Design on 3 Jun, 2008 wrote:

Fantastic techniques, these will come in useful.
Thanks for taking the time to put up.
Julesgems.com on 12 Jun, 2008 wrote:

I really like this script and have been putting it into use on my site.

However, good ol' Internet Explorer just wouldn't play ball. Underlines continually appeared on the button texts until I added an extra css line:

a.button:visited{
float:left;
font-weight:bold;
border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#333;
width:auto;
text-decoration:none;
}

Plus Firefox and safari on a Mac show the font a little too small. Using the following css script which IE ignores, makes the text size larger in Safari and Firefox and helps Firefox with the underline problem too!
Now it works perfectly in IE as well.
Marco on 16 Jun, 2008 wrote:

sweet tips :D my favorite is the 3d button one :)

thanks
Craig Farrall on 20 Jun, 2008 wrote:

Absolutely love these tips number 1 and 2 I will be using sooner or later, great post
Joe on 22 Jun, 2008 wrote:

First Technique is the most interesting, thx
crackafaza on 26 Jun, 2008 wrote:

Excellent Tutorial
mavirroco on 30 Jun, 2008 wrote:

me encanta esta tecnica a ver si puedo mejorarla
Robert Augustin on 8 Jul, 2008 wrote:

Very nice technique with the span tag. I especially like the tooltip idea very much, I can imagine enhancing it with background images and such...

Thanks!
Fernstudent on 11 Jul, 2008 wrote:

That's really great, just tested it on IE 6, FF2 and Opera and it works very nice. Thanks for this hands on tutorial!
Regarding "Css Image Gallery" it would be great to have an initial image in the preview area...
Firebubble Design on 27 Jul, 2008 wrote:

Thanks for the useful article,
These are nice link techniques.
raffaeu on 28 Jul, 2008 wrote:

Very nice, cool and easy use of CSS.
exposed acne review on 30 Jul, 2008 wrote:

Very useful CSS tutorial, highly recommended, thanks.
Mihai Stancu on 30 Jul, 2008 wrote:

I liked the article, that's for the hints.
The overall purity of code intentions were a refreshing attitude.
But the only usefull ideea was the tooltip thing. 10x for the effort
kim on 6 Aug, 2008 wrote:

thank you so much
sjl web design on 11 Aug, 2008 wrote:

The pure css image gallery is clever and great for SEO purposes. However I'm not sure how often I would use it in practice, I would favor more toward the tooltip, but still excellent post.
boxing boi on 11 Aug, 2008 wrote:

The "Pure Css Image Gallery" looks very sleek and works perfectly both on IE and FF.