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.

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

<a href="#"><i></i></a> 

13 Answers

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 href="#"><i></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><div><a href="">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="">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>+</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

Add display: block;. That's the difference between a <div> tag and an <a> tag

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

use this css.

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

<a href="#"><i></i></a>

For a modern CSS approach, we now have a few tools like aspect-ratio and grid to create perfect circle buttons like so:

 aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; 

Setting fixed height and width on an inline element (i.e an a tag) has no effect. Like mentioned by the others, we need to set the display property to a block element. Using grid allows easy centering and generally more control of the content inside the button.

All together with some optional padding and centering:

(Leaving the red border because OP had it on there)

.btn { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 0 2em; border: 1px solid red; } 

This is now compatible with all modern browsers. Of course your project may not allow such modernity but it is nice to start using this stuff when we can.

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 ) :

.circle { border-radius: 50%; } 

HTML (Added that css class to my button) :

<a></a> 

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 :

HTML:

<div> <div>Nej</div> </div> 

CSS:

.bool-answer { border-radius: 50%; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; } 

For create circle button you are this codes:

.circle-right-btn { display: block; height: 50px; width: 50px; border-radius: 50%; border: 1px solid #fefefe; margin-top: 24px; font-size:22px; }

<input type="submit" value="<">

An round button with box-shadow

.btn { height: 50px; width: 50px; line-height: 50px; font-size: 2em; border-radius: 50%; background-color: red; color: white; text-align: center; border: none; cursor: pointer; position: fixed; z-index: 1; bottom: 10%; right: 4%; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); }

<div>+</div>

The problem is that the actual width of an a tag depends on its contents. Your code has no text in the a tag, so it appears like a hunger-sunken circle. If you use the div tag along the a, you get the desired results.

Check this code out:

.btn { background-color: green; border-radius: 50%; /*this will rounden-up the button*/ width: 80px; height: 80px; /*keep the height and width equal*/ }

<a href="#"> <!--use the URL you want to use--> <button>press me</button> </a>

you could always do

html: <div class = "btn"> <a> <button> idk whatever you want to put in the button </button> </a> </div>

and then do

css: .btn a button { border-radius: 50% }

works perfect in my opinion

if you want a more generic solution that will resize with the size of the screen you can use this example.

.btnCircle { border-radius: 50% ; padding: 3vw; display: flex; justify-content: center; align-items: center; width:3vw; height:3vw; font-size: 2vw; outline:none; border: none; } .btnBackgroundColor{ background: green; } .btnColor{ color: white; } 

<button>Yes</button>