Circle button css

Css Problem Overview

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

Css Solutions

Solution 1 - Css

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>

Solution 2 - Css

.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

Solution 3 - Css

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): https://stackoverflow.com/questions/60253431/vertical-alignement-of-span-inside-a-div-when-the-font-size-is-big

Solution 4 - Css

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

Solution 5 - Css

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>

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

.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/

Solution 7 - Css

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

Solution 8 - Css

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.

Solution 9 - Css

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="<">

Solution 10 - Css

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>

Solution 11 - Css

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>

Solution 12 - Css

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

Solution 13 - Css

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>

Content Type	Original Author	Original Content on Stackoverflow
Question	pexichdu	View Question on Stackoverflow
Solution 1 - Css	Sagar Kodte	View Answer on Stackoverflow
Solution 2 - Css	Udhay Titus	View Answer on Stackoverflow
Solution 3 - Css	Basj	View Answer on Stackoverflow
Solution 4 - Css	Jack Ducasse	View Answer on Stackoverflow
Solution 5 - Css	user6597211	View Answer on Stackoverflow
Solution 6 - Css	Nikhil Maheshwari	View Answer on Stackoverflow
Solution 7 - Css	lesyk	View Answer on Stackoverflow
Solution 8 - Css	xyeres	View Answer on Stackoverflow
Solution 9 - Css	Mojtaba Nava	View Answer on Stackoverflow
Solution 10 - Css	user7396942	View Answer on Stackoverflow
Solution 11 - Css	SK-the-Learner	View Answer on Stackoverflow
Solution 12 - Css	thatboii	View Answer on Stackoverflow
Solution 13 - Css	jerryurenaa	View Answer on Stackoverflow