Want to create buttons like the image shown below [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to create an html page exactly like the demo image:
I have created all three buttons using anchor tag with data-role=button with corresponding color and text. But now what i want is to align those circles in the way the image is shown and bring them in center of the html page. Please help me.
Thanks in advance.

Answer 1

Working example: http://jsfiddle.net/Ey6Yb/1/
HTML :
<div id="button-container">
<a data-role="button" id="btn_gotohomepage" class="button_eclipse">My account</a>
<a data-role="button" id="btn_gotologinpage" class="button_eclipse">Services</a>
<a data-role="button" id="btn_gotolistpage" class="button_eclipse">Offers</a>
</div>
CSS:
#button-container {
width: 145px;
height: 255px;
margin:0 auto;
}
.button_eclipse {
width: 100px !important;
height: 100px !important;
border-radius: 50% !important;
color: rgb(255,255,255) !important;
}
.button_eclipse .ui-btn-inner {
border-radius: 50% !important;
height: 80% !important;
}
.button_eclipse .ui-btn-inner .ui-btn-text {
display: block !important;
margin: 28px 0 0 -17px;
width: 95px !important;
height: 20px !important;
text-align: center !important;
/* TEXT CHANGES */
font: 14px Calibri,Arial !important;
text-shadow:1px 1px #AD4816 !important;
}
#btn_gotohomepage {
background: rgb(247,107,33) !important;
}
#btn_gotologinpage {
background: rgb(255,165,33) !important;
margin: -30px 0 0 40px;
}
#btn_gotolistpage {
background: rgb(157,16,33) !important;
margin: -30px 0 0 0;
}
EDIT :
Here's a solution centered horizontally and vertically : http://jsfiddle.net/Ey6Yb/3/

Answer 2

Change in your css file with below script:
.ui-content {
border-width: 0;
margin: 0 auto;
overflow-x: hidden;
overflow-y: visible;
padding: 15px;
width: 150px;
}
.btn_eclipse_services {
background: none repeat scroll 0 0 #FFA521 !important;
border: 0 none !important;
border-radius: 50% 50% 50% 50% !important;
color: #FFFFFF !important;
height: 100px !important;
margin-left: 35px;
margin-top: -30px;
width: 100px !important;
}
.btn_eclipse_offers {
background: none repeat scroll 0 0 #9C1021 !important;
border: 0 none !important;
border-radius: 50% 50% 50% 50% !important;
color: #FFFFFF !important;
height: 100px !important;
margin-top: -30px;
width: 100px !important;
}
Demo:
and for more you can check this link How to Center Anything With CSS