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;
}
For
div
tag there is already default propertydisplay: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 usedisplay:block
or display:inline-block
. It will work.use this css.
Here is a flat design circle button:
HTML:
CSS:
Though I can see an accepted answer and other great answers too but thought of sharing what I did to solve this issue (in just one line).
CSS ( Created a Class ) :
HTML (Added that css class to my button) :
So Easy Right ?
Note : What I actually did was proper use of ionic classes with just one line of css.
See Result your self on this JSFiddle :
https://jsfiddle.net/nikdtu/cnx48u43/
or very simple for
<a/>
for jsfiddle reference click here