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?

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.