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   x000D   x000D     btn     height  300px    width  300px    border-radius  50     border  1px solid red    x000D   lt a class  btn  href     gt  lt i class  ion-ios-arrow-down  gt  lt  i gt  lt  a gt    x000D   x000D   x000D

User · Answer

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/

User · Answer

An round button with box-shadow https   v2 vuetifyjs com en components floating-action-buttons   x000D   x000D   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     x000D   lt div class  btn  gt   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   round-button   x000D    width 25   x000D    x000D   round-button-circle   x000D    width  100   x000D    height 0  x000D    padding-bottom  100   x000D    border-radius  50   x000D    border 10px solid  cfdcec  x000D    overflow hidden  x000D           x000D    background   4679BD   x000D    box-shadow  0 0 3px gray  x000D    x000D   round-button-circle hover   x000D    background  30588e  x000D    x000D   round-button a   x000D    display block  x000D    float left  x000D    width 100   x000D    padding-top 50   x000D    padding-bottom 50   x000D    line-height 1em  x000D    margin-top -0 5em  x000D           x000D    text-align center  x000D    color  e2eaf3  x000D    font-family Verdana  x000D    font-size 1 2em  x000D    font-weight bold  x000D    text-decoration none  x000D    x000D   lt div class  round-button  gt  lt div class  round-button-circle  gt  lt a href  http   example com  class  round-button  gt Button   lt  a gt  lt  div gt  lt  div gt  x000D   x000D   x000D      or very simple for  lt a  gt    x000D   x000D   round-button   x000D      display block  x000D      width 80px  x000D      height 80px  x000D      line-height 80px  x000D      border  2px solid  f5f5f5  x000D      border-radius  50   x000D      color  f5f5f5  x000D      text-align center  x000D      text-decoration none  x000D      background   555777  x000D      box-shadow  0 0 3px gray  x000D      font-size 20px  x000D      font-weight bold  x000D    x000D   round-button hover   x000D      background   777555  x000D    x000D   lt a href  http   example com  class  round-button  gt Button lt  a gt  x000D   x000D   x000D    for jsfiddle reference click here

User · Answer

HTML    lt div class  bool-answer  gt     lt div class  answer  gt Nej lt  div gt   lt  div gt    CSS    bool-answer       border-radius  50       width  100px      height  100px      display  flex      justify-content  center      align-items  center

User · Answer

For create circle button you are this codes   x000D   x000D   circle-right-btn       display  block      height  50px      width  50px      border-radius  50       border  1px solid  fefefe      margin-top  24px      font-size 22px    x000D   lt input  class  circle-right-btn  type  submit  value   lt   gt  x000D   x000D   x000D

User · Answer

you could always do html   lt div class    quot btn quot  gt   lt a gt   lt button gt  idk whatever you want to put in the button  lt  button gt   lt  a gt   lt  div gt  and then do css   btn a button   border-radius  50    works perfect in my opinion

User · Answer

use this css    x000D   x000D   roundbutton  x000D            display block  x000D            height  300px  x000D            width  300px  x000D            border-radius  50   x000D            border  1px solid red  x000D             x000D            x000D   lt a class  roundbutton  href     gt  lt i class  ion-ios-arrow-down  gt  lt  i gt  lt  a gt  x000D   x000D   x000D

User · Answer

Here is a flat design circle button      x000D   x000D   btn   x000D    height  80px  x000D    line-height  80px    x000D    width  80px    x000D    font-size  2em  x000D    font-weight  bold  x000D    border-radius  50   x000D    background-color   4CAF50  x000D    color  white  x000D    text-align  center  x000D    cursor  pointer  x000D    x000D   lt div class  btn  gt   lt  div gt  x000D   x000D   x000D    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

User · Answer

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    x000D   x000D   btn   x000D    display block  x000D    height  300px  x000D    width  300px  x000D    border-radius  50   x000D    border  1px solid red  x000D     x000D    x000D   lt a class  btn  href     gt  lt i class  ion-ios-arrow-down  gt  lt  i gt  lt  a gt  x000D   x000D   x000D

User · Answer

Add display  block   That s the difference between a  lt div gt  tag and an  lt a gt  tag   btn         display  block        height  300px        width  300px        border-radius  50         border  1px solid red

User · Answer

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   x000D   x000D   btn     background-color  green    border-radius  50       this will rounden-up the button     width  80px    height  80px      keep the height and width equal     x000D   lt a href     gt    lt  --use the URL you want to use-- gt    lt button class  btn  gt press me lt  button gt    lt  a gt  x000D   x000D   x000D

[css] Circle button css

Examples related to css

Examples related to button

Examples related to geometry