html5 - How to create an interactive circular links using CSS -

i wish similar this, http://timheuer.com/blog/archives.aspx need create interactive circular links using css.

there number of ways can achieve effect. page in question looks uses image background in css style. simplest example is;

1 image background

#link1 {     background-image: url('/images/button1-trans.png') }  #link2 {     background-image: url('/images/button2-trans.png') }  #link1:hover {     background-image: url('/images/button1.png') }  #link2:hover {     background-image: url('/images/button2.png') } 

1b image spriting

using multiple images requires multiple browser requests 'image spriting' technique commonly used these-days optimise download single request cached resulting in single 304 response. in tim's case, looks (although original transparent);

then use same image each link along clipping , offsetting locate appropriate part of image;

#links {     background-image:url('/images/allbuttons.png')     background-position: 0px 0px; /* sets row normal links */     width: 64px;     height: 64px; /* bounding box image */ }  #links #link1 {     background-position: 0px 0px; /* first icon on first row */ } #links #link2 {     background-position: -64px 0px; /* slides image strip left locate second icon on first row */ } #links #link1:hover {     background-position: 0px -64px; /* first icon on second row */ } #links #link2:hover{     background-position: -64px -64px; /* second image, second row */ } 

notice background-image in #links a? that's superfluous in case, nice if that, , need use background-position-x in each icon , need 1 #links a:hover set common row using background-position-y:-64px firefox team usual pedantic standards-only 'computer says no' approach decided not support background-position-x or y, though every other browser , it's in common use. chagrin of who'd use in way.

however, zoom in on buttons on blog linked to. see how pixelated?

2 pure css

you can achieve circles @ least combination of css border-style, border-width , border-radius others have posted, still need image center button.

3 icon fonts

☺☻☼☽☾☿

this modern, , preferred approach it's scalable, transparent, really, tiny , super-fast. need download font of course, svg compresses well. it's text in html, no images @ all. no crazy css styling either. checkout icomoon! see how can zoom way in on those?

zoom in on icons above, , here's fiddle

you can use icomoon free, i've purchased pro pack, it's priced , value worth it. it's awesome site can load own svg icons , generate own font you. there's ie6 support.