CODEWITHSUNDEEP
htmlcss
Michael Bremerkamp
Michael Bremerkamp

Reputation: 324

Why does changing font size mess up default HTML button styling?

I am using the default HTML button styling (not allowed to use bootstrap or other kits). When I use the default font size the button looks and acts nicely. However, when I change the font size to 30px, the button becomes darker, loses its round edges, and behaves aesthetically displeasing when clicked.

Why does changing font size mess up the HMTL default styling, and is there any way around this without rebuilding the button styling from the ground up? I have to develop in chrome by the way.

Thanks

Edit: all I am doing is changing the font size of a default button.

HTML

<button id='my-button'>Hello</button>

CSS

#my-button {
   font-size: 30px;
}

And this is the difference when I change font size enter image description here

Upvotes: 2

Views: 358

Answers (1)

andreas
andreas

Reputation: 16936

Looks fine in Chrome on Windows (see example below). Make sure you don't have any other styles applied to your buttons.

button:nth-child(2) {
  font-size: 30px;
}
<button>Test</button>
<button>Test</button>

Upvotes: 1

Related Questions