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 /

Answer 1

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.

Answer 2

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)