How to create a circle with links on the border

Question

I'm trying to make a circle like this . I was able to do this on the violin, but the problem is that I need each orange side to be a link, and I cannot do this using borders. If anyone can help me, I will be very grateful.

#circle { width: 200px; height: 200px; border-radius: 50%; background: green; } #incircle { width: 100px; height: 100px; border-radius: 50%; border: 50px dotted orange; } 

 <div id="circle"> <div id="incircle"></div> </div> 

Answer 1

The key to creating a circle with segments is finding the points in a circle that will be used as coordinates in the SVG path elements. Finding points on a circle can be easily done using trigonometric equations if we know the angles.

X Point coordinate = circle radius * Cos (angle in radians) + X Center point coordinate

Y Point coordinate = circle radius * Sin (angle in radians) + Y Center point coordinate

Angle in radians = angle in degrees * Math.PI / 180

Angles depend on no. segments we need to create. General formula (360 / no segments). Thus, to create a circle with 6 segments, the angle covered by each segment will be 60 degrees. The first segment will cover from 0 to 60 degrees, the second from 60 to 120 degrees, etc.

---

Demonstration of a circle with 6 segments:

The table below shows how points are calculated for a circle with 6 segments (where the radius of the circle is 50, the center point is 55.55):

Once the points are computed, encoding the path itself is simple. The path must begin and end at the center point (i.e. 50.50), from the center point, we must first draw a line from the point and from there draw an arc to the point Point. The following is an example path example:

 <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> 

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 

 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /> </svg> 

---

Demonstration of a circle with 12 segments:

For a circle with 12 segments, each segment will span 30 degrees, and therefore the points will be calculated as in the table below:

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 

 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 98.30,80z' /> <path d='M55,55 L98.30,80 A50,50 0 0,1 80,98.30z' /> <path d='M55,55 L80,98.30 A50,50 0 0,1 55,105z' /> <path d='M55,55 L55,105 A50,50 0 0,1 30,98.30z' /> <path d='M55,55 L30,98.30 A50,50 0 0,1 11.69,80z' /> <path d='M55,55 L11.69,80 A50,50 0 0,1 5,55z' /> <path d='M55,55 L5,55 A50,50 0 0,1 11.69,30z' /> <path d='M55,55 L11.69,30 A50,50 0 0,1 30,11.69z' /> <path d='M55,55 L30,11.69 A50,50 0 0,1 55,5z' /> <path d='M55,55 L55,5 A50,50 0 0,1 80,11.69z' /> <path d='M55,55 L80,11.69 A50,50 0 0,1 98.30,30z' /> <path d='M55,55 L98.30,30 A50,50 0 0,1 105,55z' /> </svg> 

---

Circle with a non-segmented interior:

If it looks as if the part of the circle (with a smaller radius) in the center looked unsegmented, and if this inner part should not be transparent , just add an additional circle element to the circle in the SVG.

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } circle { fill: yellowgreen; stroke: black; } 

 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /> <circle cx='55' cy='55' r='25' /> </svg> 

---

Different background for each segment:

If each segment should have a different background for them, simply add the fill attribute to each path element.

 svg { height: 220px; width: 220px; } path { stroke: black; } circle { fill: yellowgreen; stroke: black; } 

 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' fill='crimson' /> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' fill='tomato' /> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' fill='sandybrown' /> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' fill='mediumseagreen' /> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' fill='chocolate' /> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' fill='teal' /> <circle cx='55' cy='55' r='25' /> </svg> 

---

Demo with a transparent inner part:

If the central part cannot have a solid color, then everything becomes more complex, because we can no longer begin and end the path at the central point. In such cases, we need to find points on both the outer circle and the inner circle, as shown below:

In this case, the path should begin with "From (Inner)" and end at the same point, draw the line "From (Outer)" from the very beginning, then the arc to "To (Outer)", the line "To (Inner)" and an arc on "From (Inner)".

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 

 <svg viewBox='0 0 110 110'> <path d='M80,55 L105,55 A50,50 0 0,1 80,98.30 L67.5,76.65 A25,25 0 0,0 80,55z' /> <path d='M67.5,76.65 L80,98.30 A50,50 0 0,1 30,98.30 L42.5,76.65 A25,25 0 0,0 67.5,76.65z' /> <path d='M42.5,76.65 L30,98.30 A50,50 0 0,1 5,55 L30,55 A25,25 0 0,0 42.5,76.65z' /> <path d='M30,55 L5,55 A50,50 0 0,1 30,11.69 L42.5,33.34 A25,25 0 0,0 30,55z' /> <path d='M42.5,33.34 L30,11.69 A50,50 0 0,1 80,11.69 L67.5,33.34 A25,25 0 0,0 42.5,33.34z' /> <path d='M67.5,33.34 L80,11.69 A50,50 0 0,1 105,55 L80,55 A25,25 0 0,0 67.5,33.4z' /> </svg> 

---

Create each segment with a clickable link:

This is pretty easy to do when the form itself has been created. As with the chipChocolate.py post, just wrap each path in an SVG anchor tag ( <a xlink:href="#"> , where # should be replaced with the URL of the linked page).

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 

 <svg viewBox='0 0 110 110'> <a xlink:href="#"><path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /></a> <a xlink:href="#"><path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /></a> <a xlink:href="#"><path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /></a> <a xlink:href="#"><path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /></a> <a xlink:href="#"><path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /></a> <a xlink:href="#"><path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /></a> </svg> 

---

Adding text to the form:

Adding text to SVG is a bit more complicated, because again we have to specify the point where the text should be placed. If the text is small enough (say, a few characters), then again we can find the points on the circle so that the angle is exactly in the middle of the segment and uses it. The radius can be set so that it is equal to half the radius of the parent circle (if there is no non-segmented part) or such that it is halfway between the inner circle and the outer circle. Parameters text-anchor , dominant-baseline , which are added via CSS, must be sure that the text is positioned so that both the horizontal and vertical center of the text coincide with the specified point.

If the text is large (and needs to be wrapped), then additional processing is necessary, because the content in the SVG text tag will not be automatically wrapped.

Point calculation for a circle with 6 segments and without a central non-segmented area:

Point calculation for a circle with 6 segments and a central non-segmented area:

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } text { text-anchor: middle; dominant-baseline: middle; /* doesn't work in IE */ font: 12px Calibri, Arial; } 

 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> <text x='76.65' y='67.5'>1</text> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /> <text x='55' y='80'>2</text> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /> <text x='33.4' y='67.5'>3</text> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /> <text x='33.4' y='42.5'>4</text> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /> <text x='55' y='30'>5</text> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /> <text x='76.65' y='42.5'>6</text> </svg> <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> <text x='87.47' y='73.75'>1</text> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /> <text x='55' y='92.5'>2</text> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /> <text x='22.52' y='73.75'>3</text> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /> <text x='22.52' y='36.25'>4</text> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /> <text x='55' y='17.5'>5</text> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /> <text x='87.47' y='36.25'>6</text> <circle cx='55' cy='55' r='25' /> </svg> 

---

Dynamic creation using JavaScript:

The following is a crude JS implementation to dynamically create segments. The function takes four arguments - the X coordinate of the center of the circle, the Y coordinate of its center, the radius of the circle, and the number. segments / slices.

 var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d; function createPie(cx, cy, r, slices) { for (var i = 0; i < slices; i++) { path = document.createElementNS("http://www.w3.org/2000/svg", "path"); fromAngle = i * 360 / slices; toAngle = (i + 1) * 360 / slices; fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180)); fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180)); toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180)); toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180)); d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z'; path.setAttributeNS(null, "d", d); document.getElementById('pie').appendChild(path); } } createPie(55, 55, 50, 6); 

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 

 <svg viewBox="0 0 110 110" id="pie"></svg> 

The JS sample does not cover examples with a non-segmented inner circle, but this can be achieved by expanding this.

Answer 2

You can use svg arc to create sections and svg anchor tags (equivalent to HTML anchor tags) for links.

 .frag { fill: #FFA500; stroke: #FFFFFF; transition: fill 0.3s ; } .center { fill: #008000; } a:hover .frag { fill: #FFC722; } text { font-size: 17px; fill: #FFFFFF; } 

 <svg width="200" height="200" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision"> <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a> <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a> <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a> </svg> 

---

You can also stretch or resize svg .

 .frag { fill: #FFA500; stroke: #FFFFFF; transition: fill 0.3s ; } .center { fill: #008000; } a:hover .frag { fill: #FFC722; } text { font-size: 17px; fill: #FFFFFF; } 

 <svg width="100" height="200" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <g id="circle"> <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a> <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a> <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a> </g> </svg> <svg width="200" height="100" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <use xlink:href="#circle" /> </svg> <svg width="150" height="150" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <use xlink:href="#circle" /> </svg> <svg width="100" height="100" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <use xlink:href="#circle" /> </svg> <svg width="50" height="50" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <use xlink:href="#circle" /> </svg> 

Answer 3

CSS Only Approach

NOTE. The markup can be significantly reduced using pseudo-elements that I have not currently used.

You can use SVG , but this can only be done using CSS and HTML.

What I did was create a 12 semicircle (by adding overflow: hidden; to the parent container). Then I created separate semicircle groups 6 .

Corners in the center should be 30deg each ( 360/12 ). To achieve this, we need to turn the semicircles from their original center of the circle. We can do this with transform-origin: 50% 100%;

Now you just need to rotate / flip the second group of semicircle 6 to complete the design.

Finally, add a green green circle to complete the design.

 .cont, #bag { height:200px; width:400px; overflow:hidden; } #one, #two, #three, #four, #five, #six { height:400px; width:400px; border-radius:200px; } #bag > div { position:relative; transform-origin:50% 100%; } #one, #three, #five { background-color:orange; } #one:hover, #three:hover, #five:hover { background-color:gold; } #two, #four, #six { background-color:forestgreen; } #bag > :nth-child(2) { top:-200px; -webkit-transform:rotate(30deg); transform:rotate(30deg); } #bag > :nth-child(3) { top:-400px; transform:rotate(60deg); transform:rotate(60deg); } #bag > div:nth-child(4) { top:-600px; -webkit-transform:rotate(90deg); transform:rotate(90deg); } #bag > :nth-child(5) { top:-800px; -webkit-transform:rotate(120deg); transform:rotate(120deg); } #bag > :nth-child(6) { top:-1000px; -webkit-transform:rotate(150deg); transform:rotate(150deg); } #bag:nth-of-type(2){ transform:scale(-1); transform-origin:50% 50%; } #green-center { height:200px; width:200px; border-radius:50%; background-color:forestgreen; position: relative; top:-300px; left:100px; } 

 <div id="bag"> <div class="cont"> <a href="http://example.com/"><div id="one"></div></a> </div> <div class="cont"> <div id="two">ABC</div> </div> <div class="cont"> <a href="http://example.com/"><div id="three"></div></a> </div> <div class="cont"> <div id="four"></div> </div> <div class="cont"> <a href="http://example.com/"><div id="five"></div></a> </div> <div class="cont"> <div id="six"></div> </div> </div> <div id="bag"> <div class="cont"> <a href="http://example.com/"><div id="one"></div></a> </div> <div class="cont"> <div id="two"></div> </div> <div class="cont"> <a href="http://example.com/"><div id="three"></div></a> </div> <div class="cont"> <div id="four"></div> </div> <div class="cont"> <a href="http://example.com/"><div id="five"></div></a> </div> <div class="cont"> <div id="six"></div> </div> </div> <div id="green-center"> 

Output on Firefox , Google Chrome, and IE :

Answer 4

You can use a map, for example:

 #circle{ position:relative; width:200px; height:200px; border-radius:50%; background:green; } #mappinglink{ position:absolute; top:0px; left:0px; } #incircle{ width:100px; height:100px; border-radius:50%; border:50px dotted orange; border-spacing: 10px 50px; } 

 <div id="circle"> <div id="incircle"></div> <img id="mappinglink" width="200" height="200" usemap="#mymap" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/> <map name="mymap"> <area alt="" title="" href="#" shape="poly" coords="29,28,71,3,84,50,64,64" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="148,12,122,55,142,73,184,46" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="149,96,199,93,192,142,146,121" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="105,149,128,141,159,180,112,200" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="59,133,79,147,65,193,23,164" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="48,87,50,108,3,120,4,71" style="outline:none;" target="_self" /> </map> </div> 

Answer 5

Try this clean css:

 *{box-sizing: border-box;padding: 0; margin: 0} nav,nav:before{ border-radius:50%; background:green } nav{ width:200px; height:200px; margin: 40px auto; position: relative; overflow: hidden } nav:before{ content: ''; position:absolute; top: 50%; left: 50%; width: 100px; height: 100px; z-index: 2; transform: translate3d(-50%,-50%,0) } #incircle{ width:100px; height:100px; border-radius:50%; border:50px dotted orange; } nav a{ position: absolute; z-index: 1; cursor: pointer; width: 0px; height: 0px; border-top: 30px solid transparent; border-bottom: 30px solid transparent } nav a:nth-child(3),nav a:nth-child(4){ left: 70px; border-left: 30px solid transparent; border-right: 30px solid transparent } nav a:first-child{ top: 70px; left: 0; border-left: 100px solid orange } nav a:nth-child(2){ left: 20px; border-left: 100px solid orange; top: 20px; transform: rotateZ(60deg); } nav a:nth-child(3){ transform: rotateZ(30deg); top: 0px; left: 86px; border-top: 100px solid orange; } nav a:nth-child(4){ left: 46px; border-bottom: 100px solid orange; bottom: -4px; transform: rotateZ(28deg); } nav a:nth-child(5){ right: 24px; border-right: 100px solid orange; bottom: 20px; transform: rotateZ(60deg); } nav a:last-child{ top: 70px; right: 0; border-right: 100px solid orange } 

 <nav> <a></a> <a></a> <a></a> <a></a> <a></a> <a></a> </nav> 

Answer 6

Here is the violin.

HTML

 <div id="circle"> <a id='left' href='left'></a> <a id='right' href='right'></a> <div id="mid"></div> </div> 

CSS

 #circle{ width: 200px; height: 200px; border-radius: 50%; position: relative; overflow: hidden; } a { height: 100%; width: 49%; background: orange; display: block; } #left { float: left; } #right { float: right; } #mid { border-radius: 50%; background: green; border: 4px solid white; position: absolute; display: block; height: 50%; width: 50%; left: 24%; top: 24%; } 

This can be trivially expanded to 4 parts instead of 2, dividing a vertically. However, I recommend that you look at something like RaphaelJS , you can even fool and use a pie chart

Answer 7

I tried using pure css, And came up with this:

 .wrap { height: 200px; width: 200px; background: red; border-radius: 50%; position: relative; overflow: hidden; } .wrap:after { position: absolute; height: 50%; width: 50%; content: ""; border-radius: 50%; background: green; left: 25%; top: 25%; } .slice { height: 0; width: 0; border-left: 200px solid blue; border-top: 200px solid transparent; position: absolute; top: -100px; left: -100px; } .part2 { border-left: 200px solid red; border-top: 200px solid transparent; transform: rotate(180deg); top: -100px; left: -100px; } .part3 { border-left: 200px solid pink; border-top: 200px solid transparent; transform: rotate(90deg); top: -100px; left: 100px; } 

 <div class="wrap"> <a href="#" class="slice"></a> <div class="slice part2"></div> <a href="#" class="slice part3"></a> </div> 

However, this uses a “border trick” to generate a blue div, and this will make it clickable. However, I feel this when adapted, may work.

• Or if you were interested / openly using SCSS this
• Or you can use this as a basis for your design.

Something like

 var items = document.querySelectorAll('.circle a'); for(var i = 0, l = items.length; i < l; i++) { items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; } document.querySelector('.menu-button').onclick = function(e) { e.preventDefault(); document.querySelector('.circle').classList.toggle('open'); } 

 @import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; body { background: #39D; } .circular-menu { width: 250px; height: 250px; margin: 0 auto; position: relative; } .circle { width: 250px; height: 250px; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .open.circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .circle a { text-decoration: none; color: white; display: block; height: 40px; width: 40px; line-height: 40px; margin-left: -20px; margin-top: -20px; position: absolute; text-align: center; } .circle a:hover { color: #eef; } .menu-button { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); text-decoration: none; text-align: center; color: #444; border-radius: 50%; display: block; height: 40px; width: 40px; line-height: 40px; padding: 10px; background: #dde; } .menu-button:hover { background-color: #eef; } /* Author stuff */ h1.author { text-align:center; color: white; font-family: Helvetica, Arial, sans-serif; font-weight: 300; } h1.author a { color: #348; text-decoration:none; } h1.author a:hover { color: #ddd; } 

 <nav class="circular-menu"> <div class="circle"> <a href="" class="fa fa-home fa-2x"></a> <a href="" class="fa fa-facebook fa-2x"></a> <a href="" class="fa fa-twitter fa-2x"></a> <a href="" class="fa fa-linkedin fa-2x"></a> <a href="" class="fa fa-github fa-2x"></a> <a href="" class="fa fa-rss fa-2x"></a> <a href="" class="fa fa-pinterest fa-2x"></a> <a href="" class="fa fa-asterisk fa-2x"></a> </div> <a href="" class="menu-button fa fa-bars fa-2x"></a> </nav> 

Answer 8

This seems to work for SVG. It has its own <a> , which may contain arbitrary forms.