Circle button css

Question

I'm a beginner and very confused, as a div tag when I give the same width and height with border-radius: 50% it always becomes circle. but with the tag a in case I want to make a circle button, It doesnt work that way. This is when I try to make a circle border button clickable.

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

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

Answer 1

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>

Answer 2

.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