Make button width fit to the text

Question

While I was fiddling with this  Fancy 3D Button  example  I found that the width seemed to be hard-coded to fit the text s width    Here is the HTML   CSS    x000D   x000D  body   x000D    background-image  url http   subtlepatterns com patterns ricepaper png  x000D    x000D  a   x000D    position  relative  x000D    color  rgba 255  255  255  1   x000D    text-decoration  none  x000D    background-color  rgba 219  87  5  1   x000D    font-family   Yanone Kaffeesatz   x000D    font-weight  700  x000D    font-size  3em  x000D    display  block  x000D    padding  4px  x000D    -webkit-border-radius  8px  x000D    -moz-border-radius  8px  x000D    border-radius  8px  x000D    -webkit-box-shadow  0px 9px 0px rgba 219  31  5  1   0px 9px 25px rgba 0  0  0   7   x000D    -moz-box-shadow  0px 9px 0px rgba 219  31  5  1   0px 9px 25px rgba 0  0  0   7   x000D    box-shadow  0px 9px 0px rgba 219  31  5  1   0px 9px 25px rgba 0  0  0   7   x000D    margin  100px auto  x000D    width  160px  x000D    text-align  center  x000D    -webkit-transition  all  1s ease  x000D    -moz-transition  all  1s ease  x000D    -ms-transition  all  1s ease  x000D    -o-transition  all  1s ease  x000D    transition  all  1s ease  x000D    x000D  a active   x000D    -webkit-box-shadow  0px 3px 0px rgba 219  31  5  1   0px 3px 6px rgba 0  0  0   9   x000D    -moz-box-shadow  0px 3px 0px rgba 219  31  5  1   0px 3px 6px rgba 0  0  0   9   x000D    box-shadow  0px 3px 0px rgba 219  31  5  1   0px 3px 6px rgba 0  0  0   9   x000D    position  relative  x000D    top  6px  x000D    x000D   lt link href  http   fonts googleapis com css family Yanone Kaffeesatz 700  rel  stylesheet  type  text css  gt  x000D   x000D   lt a href  javascript void 0    gt Push me  lt  a gt  x000D   x000D   x000D      If I remove the width property  the button would fill the page width     Is there any way to make the button s width fit to the text  automatically

User · Answer

If you are developing to a modern browser  https   caniuse com  search fit 20content  You can use   width  fit-content

User · Answer

Pretty late and not sure if this was available when the question was asked  set width  auto   Seems to do the trick

User · Answer

If you are aiming for maximum browser support  modern approach is to place button in a div with display flex  and flex-direction row  The same trick will work for height with flex-direction column  or both height and width will require 2 divs

User · Answer

Remove the width and display  block and then add display  inline-block to the button  To have it remain centered you can either add text-align  center  on the body or do the same on a newly created container    The advantage of this approach  as opossed to centering with auto margins  is that the button will remain centered regardless of how much text it has   Example  http   cssdeck com labs 2u4kf6dv

User · Answer

just add display  inline-block  property and removed width

User · Answer

Try to add display inline  to the CSS property of a button

User · Answer

I like Roger Cruz s answer of   width  fit-content    and I just want to add that you can use  padding  0px 10px    to add a nice 10px padding on the right and left side of the text in the button  Otherwise the text would be right up along the edge of the button and that wouldn t look good

User · Answer

Keeping the element s size relative to its content can also be done with display  inline-flex and display  table  The centering can be done with     text-align  center  on the parent  or above  it s inherited  display  flex  and justify-content  center  on the parent position  absolute  left  50   transform  translateX -50    on the element with position  relative   at least  on the parent    Here s a flexbox    guide from    CSS Tricks  Here s an article on centering from CSS Tricks   Keeping an element only as wide as its content     Can use display  table  Or inline-anything including inline-flex as used in my snippet example below    Keep in mind that when centering with flexbox s justify-content  center  when the text wraps the text will align left  So you will still need text-align  center  if your site is responsive and you expect lines to wrap    More examples in this stack answer    x000D   x000D  body   x000D    display  flex  x000D    flex-direction  column  x000D    height  100vh  x000D    padding  20px  x000D    x000D   container   x000D    display  flex  x000D    justify-content  center     center horizontally    x000D    align-items  center     center vertically    x000D    height  50   x000D    x000D   container c1   x000D    text-align  center     needed if the text wraps    x000D       text-align is inherited  it can be put on the parent or the target element    x000D    x000D   container c2   x000D      without text-align  center     x000D    x000D   button   x000D    padding  5px 10px  x000D    font-size  30px  x000D    text-decoration  none  x000D    color  hsla 0  0   90   1   x000D    background  linear-gradient hsla 21  85   51   1   hsla 21  85   61   1    x000D    border-radius  10px  x000D    box-shadow  2px 2px 15px -5px hsla 0  0   0   1   x000D    x000D   button hover   x000D    background  linear-gradient hsl 207 5  84 8   51    hsla 207  84   62   1    x000D    transition  all 0 2s linear  x000D    x000D   button b1   x000D      display  inline-flex     element only as wide as content    x000D    x000D   button b2   x000D      display  table     element only as wide as content    x000D    x000D   lt div class  container c1  gt  x000D     lt a class  button b1  href  https   stackoverflow com questions 27722872   gt This Text Is Centered Before And After Wrap lt  a gt  x000D   lt  div gt  x000D   lt div class  container c2  gt  x000D     lt a class  button b2  href  https   stackoverflow com questions 27722872   gt This Text Is Centered Only Before Wrap lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Fiddle  https   jsfiddle net Hastig 02fbs3pv

[html] Make button width fit to the text

Examples related to html

Examples related to css