How to create an interactive circular links using CSS [closed] - html

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I wish to do something similar to this,
http://timheuer.com/blog/archives.aspx
i need to create a interactive circular links using CSS.

Answer 1

There are a number of ways you can achieve that effect. The page in question looks like it simply uses an image background in a css style. The 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 like requires multiple browser requests so 'image spriting' is a technique commonly used these-days to optimise the download into a single request which will then be cached resulting in a single 304 response. In Tim's case, his looks like this (although the original is transparent);
Then you use the same image for each link along with a clipping and offsetting to locate the appropriate part of the image;
#links a {
background-image:url('/images/allButtons.png')
background-position: 0px 0px; /* sets the row for all normal links */
width: 64px;
height: 64px; /* bounding box for the image */
}
#links #link1 {
background-position: 0px 0px; /* first icon on the first row */
}
#links #link2 {
background-position: -64px 0px; /* slides the image strip left to locate the second icon on the first row */
}
#links #link1:hover {
background-position: 0px -64px; /* first icon on the second row */
}
#links #link2:hover{
background-position: -64px -64px; /* second image, second row */
}
Notice the background-image in #links a? Well that's actually superfluous in this case, but it would be nice if you could do that, and then you would only need to use background-position-x in each icon and you would only need one #links a:hover which would set the common row using background-position-y:-64px but the FireFox team with their usual pedantic standards-only 'computer says no' approach decided NOT support background-position-x or y, even though every other browser does and it's in common use. Much to the chagrin of everyone who'd like to use it in this way.
However, zoom in on those buttons on the blog you linked to. See how they look all pixelated?
2 Pure CSS
You can achieve the circles at least with a combination of CSS border-style, border-width and border-radius as others have posted, but you still need the image for the center button.
3 Icon Fonts
☺☻☼☽☾☿
This is the most modern, and my preferred approach as it's fully scalable, transparent, really, really tiny and super-fast. You need to download your font of course, but SVG compresses really well. It's just text in your HTML, no images at all. No crazy CSS styling either. Checkout IcoMoon! See how you can zoom all the way in on those?
Zoom in on the icons above, and Here's a fiddle
You can use icoMoon free, but I've purchased the pro pack, it's honestly priced and the value is well worth it. It's an awesome site as you can even load up your own SVG icons and it will generate your own font for you. There's even IE6 support.

Answer 2

EXPLANATION
The page You show us use a images sprit with icon of all menu item, event with border. My example show how do this with simple css. You can also use images sprit but including only icon.
HTML CODE:
<ul>
<li><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
<li><span>About</span></li>
<li><span>Projects</span></li>
</ul>
CSS CODE
html, body {
background: #369BD7;
font-family: tahoma;
font-size: 12px;
}
a {
color: #fff;
}
ul {
clear:both;
margin: 0;
padding: 0;
}
ul li {
display:block;
position: relative;
float: left;
height: 80px;
width: 80px;
padding: 0;
margin-left: 10px;
list-style: none;
text-align: center;
white-space: nowrap;
}
ul li:first-child {
margin: 0;
}
ul li a {
display:block;
margin: 10px auto;
height: 40px;
width: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border: 4px solid #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: transparent url('http://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/home.png') no-repeat 50% 50%;
}
ul li a:hover {
background-color: #fff;
}
ul li a span {
display: block;
position: absolute;
bottom: 0;
left:0;
width: 100%;
text-align: center;
z-index: 1;
}
BORDER RADIUS BROWSER SUPPORT
http://caniuse.com/#search=border-radius
DEMO
http://jsfiddle.net/bartekbielawa/fgPf8/6/

Answer 3

The trick is to have the border-radius be half of the height and width. Then just use a gif or png for IE fallback.
.round-button {
width:100px;
height:100px;
border-radius:50px; /* be sure to add all the browser prefix versions */
}