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

Answer 1

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/

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

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

Answer 6

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