Reputation: 324
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
Upvotes: 2
Views: 358
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