[css] Circle button css

_x000D_
_x000D_
.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_
_x000D_
_x000D_

or very simple for <a/>

_x000D_
_x000D_
.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_
_x000D_
_x000D_

for jsfiddle reference click here