Round Buttons


#1

I'm currently trying to build my own website and I thought I'd start off small with building the homepage and more specifically the buttons on there. I want to have four circular buttons placed vertically on the left side of the page. So far I've figured out how to make a button circular and have it change in opacity when hovered over but I need to make it much smaller and fixed near the left side of the page. I was building it with jquery at first but changed over to css to see if i could figure it out easier. Suggestions using either are much appreciated! Heres my css code for one button as of now.

.button1 {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
    border-radius: 50%;
	border:0px solid #FF6138;
    overflow:hidden;
    background: #FF6138;
    opacity: 1
}

.button1 a {
    display:block;
	float:left;
	width:100%;
	padding-top:50%;
    padding-bottom:50%;
	line-height:1em;
	margin-top:-0.5em;

	text-align:center;
	color:#000000;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}

.button1:hover {
  opacity: 0.90;
}

#2

The only we can help you position the buttons, is if you provide us with your full html + css code


#3

Does this help:?

Round Button Pen