.round-button {_x000D_
width:25%;_x000D_
}_x000D_
.round-button-circle {_x000D_
width: 100%;_x000D_
height:0;_x000D_
padding-bottom: 100%;_x000D_
border-radius: 50%;_x000D_
border:10px solid #cfdcec;_x000D_
overflow:hidden;_x000D_
_x000D_
background: #4679BD; _x000D_
box-shadow: 0 0 3px gray;_x000D_
}_x000D_
.round-button-circle:hover {_x000D_
background:#30588e;_x000D_
}_x000D_
.round-button a {_x000D_
display:block;_x000D_
float:left;_x000D_
width:100%;_x000D_
padding-top:50%;_x000D_
padding-bottom:50%;_x000D_
line-height:1em;_x000D_
margin-top:-0.5em;_x000D_
_x000D_
text-align:center;_x000D_
color:#e2eaf3;_x000D_
font-family:Verdana;_x000D_
font-size:1.2em;_x000D_
font-weight:bold;_x000D_
text-decoration:none;_x000D_
}
_x000D_
<div class="round-button"><div class="round-button-circle"><a href="http://example.com" class="round-button">Button!!</a></div></div>
_x000D_
or very simple for <a/>
.round-button {_x000D_
display:block;_x000D_
width:80px;_x000D_
height:80px;_x000D_
line-height:80px;_x000D_
border: 2px solid #f5f5f5;_x000D_
border-radius: 50%;_x000D_
color:#f5f5f5;_x000D_
text-align:center;_x000D_
text-decoration:none;_x000D_
background: #555777;_x000D_
box-shadow: 0 0 3px gray;_x000D_
font-size:20px;_x000D_
font-weight:bold;_x000D_
}_x000D_
.round-button:hover {_x000D_
background: #777555;_x000D_
}
_x000D_
<a href="http://example.com" class="round-button">Button</a>
_x000D_
for jsfiddle reference click here