posted on:April 24, 2008

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

Enjoyed the article?

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

DeliciousStumbleUpon RedditSubscribe

Comments (78 Comments)

  1. Ivan
    April 24, 2008

    Very nice techniques.
  2. Steven Snell
    April 25, 2008

    I really like the gallery. Thanks.
  3. Joao Oliveira
    April 25, 2008

    Nice techniques! The gallery is very cool! Thanks!
  4. Rafael Masoni
    April 25, 2008

    Cool. I like the tooltip. Thanks for sharing!
  5. DotNetYuppie
    April 25, 2008

    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.
  6. Majesticskull
    April 25, 2008

    Very nice! Thanks!
  7. nikola
    April 25, 2008

    nice article and techniques ...
  8. Toni
    April 25, 2008

    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.
  9. b0li
    April 25, 2008

    great techniques
  10. Peter Gasston
    April 25, 2008

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

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

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

    Very good the tutorial. The CSS is very crazy! :)
  14. Beyond Random
    April 25, 2008

    great list!!
  15. Michael
    April 26, 2008

    Great. Absolutely great. Thanks !
  16. Luis Henrique
    April 27, 2008

    Very nice!!
  17. Jakub Slaby
    April 27, 2008

    great stuff!
  18. Binny V A
    April 27, 2008

    Nice methods! But in practice, using Javascript for some of these effects may be better, IMO.
  19. Reynder Bruyns
    April 28, 2008

    Good examples en clean coding. Bookmarked.
  20. Erik
    April 29, 2008

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

    great tutorial.
  22. zoel
    April 29, 2008

    must be use it ;-) thanx
  23. land surveyors united
    May 1, 2008

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

    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!
  25. Martin Sarsini
    May 1, 2008

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

    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.
  27. CT
    May 3, 2008

    exelente !!
  28. Denver Web Design
    May 4, 2008

    The CSS button is absolutely great, thanks!
  29. Kurzy Pocasie Slovniky
    May 8, 2008

    Thankx for file for download ;)
  30. SARAH
    May 8, 2008

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

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

    I really Like these techniques and they are helping me and others deploy them on thier present domain perfectly. Thank you very much.
  33. Mark Wilmot
    May 13, 2008

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

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

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

    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
  37. Fouad Masoud
    May 15, 2008

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

    Great stuff, I especially like the button.
  39. javier
    May 19, 2008

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

    Cool techniques.Thanks
  41. Web Design Liverpool
    May 27, 2008

    Nice hover over effect.
  42. Posicionamiento
    May 27, 2008

    Good enough to digg :)
  43. evodesign
    May 28, 2008

    Thanks for the article. Nice techniques.
  44. sidhu
    May 28, 2008

    this is very nice and usefull
  45. James Socol
    May 30, 2008

    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.
  46. Media Surgery Design
    June 3, 2008

    Fantastic techniques, these will come in useful. Thanks for taking the time to put up.
  47. Julesgems.com
    June 12, 2008

    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.
  48. Marco
    June 16, 2008

    sweet tips :D my favorite is the 3d button one :) thanks
  49. Craig Farrall
    June 20, 2008

    Absolutely love these tips number 1 and 2 I will be using sooner or later, great post
  50. Joe
    June 22, 2008

    First Technique is the most interesting, thx
  51. crackafaza
    June 26, 2008

    Excellent Tutorial
  52. mavirroco
    June 30, 2008

    me encanta esta tecnica a ver si puedo mejorarla
  53. Robert Augustin
    July 8, 2008

    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!
  54. Fernstudent
    July 11, 2008

    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...
  55. Firebubble Design
    July 27, 2008

    Thanks for the useful article, These are nice link techniques.
  56. raffaeu
    July 28, 2008

    Very nice, cool and easy use of CSS.
  57. exposed acne review
    July 30, 2008

    Very useful CSS tutorial, highly recommended, thanks.
  58. Mihai Stancu
    July 30, 2008

    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
  59. kim
    August 6, 2008

    thank you so much
  60. sjl web design
    August 11, 2008

    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.
  61. boxing boi
    August 11, 2008

    The "Pure Css Image Gallery" looks very sleek and works perfectly both on IE and FF.
  62. Shannn
    November 25, 2008

    Those are very useful techniques. Thank you!!!
  63. Daniel
    December 24, 2008

    Hi. First congratulations for your websites and tips. I would like a little help with your Pure Css Image Gallery. I would like to add one more row with more pics, just above the current one. So my gallery would have two rows with 4 or 5 pics each. But.. for some how.. i am not being able to do it. Any help ? Thanks
  64. ilac isimleri
    January 14, 2009

    thanks
  65. Kupa Bardak
    January 14, 2009

    Thanks for the useful article,
  66. Resimler
    January 15, 2009

    (: Very nice! Thanks!
  67. web tasarim
    January 15, 2009

    Thank my friend, good
  68. Chris
    January 16, 2009

    Thank you very much, especially for the great image gallery! I really would like the images to linger when a thumb is clicked thou. I guess it's something about a:active, but I just can't figure how to do it. Does anyone know?
  69. hagiwhat
    January 17, 2009

    thanks sir. very good..
  70. Hosting
    March 5, 2009

    very nice page thankss
  71. Vernon
    March 26, 2009

    Very nice techniques... love that 3d button.
  72. text-to-tv
    March 28, 2009

    Very cool!! Great work, found it very useful for my website
  73. Resim
    May 16, 2009

    Very cool!! Great work, found it very useful for my website
  74. Resim
    May 16, 2009

    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
  75. Amanj A. Ali
    May 26, 2009

    Very nice techniques, i like it :)
  76. sarbartha
    May 26, 2009

    I prefer CSS and fan of it and try my best to enlighten most of the part of my design with CSS. These resource will really help me a lot...Thanks
  77. Vishal
    June 15, 2009

    Hi Thanks for the clean and neat code. I have tried working with few different CSS codes for gallery purpose, however not all works perfectly with Opera and Safari. However being relatively new to CSS am having a small problem, when I try to use more than 4 images in gallery - say about 6. In addition, I was wondering if you knew how to make the thumbs and full images always be center align. For example, the box containing this gallery is 600 px wide. So if there were 4 to 6 thumbs, they will be center aligned (along the footer as they are now) & hover will display full images that will be center aligned in the box too. Or an option 2, where thumbs appear on left side and on-hover image display will be on right area. Is this possible? Thanks.
  78. Vishal
    June 15, 2009

    Well I figured out the issue with ability to add more than 4 images and center align and different width x height for different images. Now it seems like setting up Image thumbs vertically is the real problem. Any tips on how to get it working? Thanks.

Sorry, the comment form is closed at this time.