Adding menu in a circular Position using Html - html

Question

Hello i am trying to do something like this http://imgur.com/Ilu7ZM5 but instead of icons i am trying to place icons
my current html code is
<div>
<center>
<a href="#">
<button class="btn btn-success btn-lg">a</button></a>
</center>
<left><img src="img/arrow.png" alt="" width="250px" height="150px"/></left>
<br>
<br>
<left>
<button class="btn btn-warning btn-lg"><center>b</center></button>
</left>
<button class="btn btn-danger btn-lg">1</button>
<br>
<br>
<br>
<br>
<center> <button class="btn btn-success btn-lg">2</button><br><br></center>
</div>
how do i achieve that ?

Answer 1

Here you go. Demo includes a version with icons and a version with text. See the demo link for full code as there is an animation to the menus not seen in the screenshot below. If you'd like to use these, feel free to fork it..
Icons
<div class="wrap">
<div class="circle">
<i class="icon i1 icon-flag"></i>
<i class="icon i2 icon-heart"></i>
<i class="icon i3 icon-code"></i>
<i class="icon i4 icon-coffee"></i>
<div class="line1"></div>
<div class="line2"></div>
<span class="text">Menu</span>
</div>
</div>
Text
<div class="wrap2">
<div class="circle">
<i class="icon i1">A</i>
<i class="icon i2">B</i>
<i class="icon i3">C</i>
<i class="icon i4">D</i>
<div class="line1"></div>
<div class="line2"></div>
<span class="text">Menu</span>
</div>
</div>
See link for the full CSS code for both versions.. didn't post here because it's quite a bit.