Circle Button Css

Answer :

For div tag there is already default property display:block given by browser. For anchor tag there is not display property given by browser. You need to add display property to it. That's why use display:block or display:inline-block. It will work.

.btn {   display:block;   height: 300px;   width: 300px;   border-radius: 50%;   border: 1px solid red;    }

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>

.round-button {   width:25%; } .round-button-circle {   width: 100%;   height:0;   padding-bottom: 100%;   border-radius: 50%;   border:10px solid #cfdcec;   overflow:hidden;            background: #4679BD;    box-shadow: 0 0 3px gray; } .round-button-circle:hover {   background:#30588e; } .round-button a {   display:block;   float:left;   width:100%;   padding-top:50%;   padding-bottom:50%;   line-height:1em;   margin-top:-0.5em;            text-align:center;   color:#e2eaf3;   font-family:Verdana;   font-size:1.2em;   font-weight:bold;   text-decoration:none; }

<div class="round-button"><div class="round-button-circle"><a href="http://example.com" class="round-button">Button!!</a></div></div>

or very simple for <a/>

.round-button {     display:block;     width:80px;     height:80px;     line-height:80px;     border: 2px solid #f5f5f5;     border-radius: 50%;     color:#f5f5f5;     text-align:center;     text-decoration:none;     background: #555777;     box-shadow: 0 0 3px gray;     font-size:20px;     font-weight:bold; } .round-button:hover {     background: #777555; }

<a href="http://example.com" class="round-button">Button</a>

for jsfiddle reference click here

Here is a flat design circle button:

.btn {   height: 80px;   line-height: 80px;     width: 80px;     font-size: 2em;   font-weight: bold;   border-radius: 50%;   background-color: #4CAF50;   color: white;   text-align: center;   cursor: pointer; }

<div class="btn">+</div>

but the problem is that the + might not be perfectly centered vertically in all browsers / platforms, because of font differences... see also this question (and its answer): Vertical alignement of span inside a div when the font-size is big