pexichdu pexichdu - 4 months ago 22
CSS Question

Circle button css

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.

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


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

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>

Comments