change css button border width without changing other effects

Question

<button>Foo</button>
<button style="border-width: 3px">Bar</button>

On Firefox these render as

Changing border-width has changed other effects. I just want to make the border smaller.

Here is the box model for the button on the left

I want the button to fit more tightly around the text something like this

According to the box model, it looks like the border is the only thing responsible for the vertical "padding".

How can I shrink the button to the text, preserving the aesthetic styles?

can you explain how the accepted answer preserve the asethetic styles? if you don't want to preserve *the default style* you should make it clear in the question because in this case it's trivial to remove the default style and apply a new one to all the buttons — Temani Afif, Apr 01 '20 at 10:44
I've since read elsewhere that applying any visual style (e.g. background-color) will trash the browser visual styles, but the accepted answer is pretty close and less hacky than yours. — spraff, Apr 04 '20 at 06:16

score 0 · Accepted Answer · answered Apr 01 '20 at 09:39

0

Try this

button {
  outline: none;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 3px;
}

<button>Foo</button>
<button style="border-width: 2px">Bar</button>

answered Apr 01 '20 at 09:39

Dickens A S

3,824
2
22
45

change css button border width without changing other effects

1 Answers1