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>
 

Agram

Can you elaborate it..?? – Outstare

Read about inline and block level elements and you will be able to answer your own question) – Gerstner

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>

Monostome

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

Oreopithecus

Answer 3

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

Blisse

Answer 4

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 almost all browsers (now that IE is sunset). Of course your project may not allow such modernity but it is nice to start using this stuff when we can.

Corporation

Answer 5

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;
    }

Moonshot

Answer 6

use this css.

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

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

Zuniga

Answer 7

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 class="button circle button-energized ion-paper-airplane"></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 :

https://jsfiddle.net/nikdtu/cnx48u43/

Tradein

Answer 8

HTML:

<div class="bool-answer">
  <div class="answer">Nej</div>
</div>

CSS:

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

Truckage

Answer 9

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  class="circle-right-btn" type="submit" value="<">

Radium

Answer 10

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 class="btnCircle btnBackgroundColor btnColor">Yes</button>

Howze

Answer 11

An round button with box-shadow https://v2.vuetifyjs.com/en/components/floating-action-buttons/

.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 class="btn">+</div>

Asclepiadean

Answer 12

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 class="btn">press me</button>
 </a>

Bufflehead

It's not an answer, it is the same code as in the original post, you just added a background colour. – Forwardlooking

Oh! So sorry! I change it now – Bufflehead

@pexichdu, take a look at this now. – Bufflehead

Now it's the same as the accepted answer. And you should never ever add a button inside an a tag, especially with that Pro in your nickname :( – Forwardlooking

Which answer does even mention the reason for the width of the a tag? Ad it's just an example. A div can be used instead of the button – Bufflehead

Answer 13

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

Capstan