seanmonstar

At Least Pad the Default Button Styles

Some people like to style buttons to their own design, ensuring they look the same cross browser or enhance the site theme. Others are perfectly fine with a <button /> being rendered differently depending on browser and operating system combination. I understand both sides. Sometimes a styled button can look really nice. Other times, it just makes sense to leave it at default, because users are used to seeing buttons the way their OS always displays them.

As long as buttons have a consistent look across the site, I’d say both are just as usable. If you’re in the latter camp, leaving button styles to the browser, please, oh please, at least add some padding to the buttons. The default button styles leave the border right on top of the text, making it very annoying to read the text of the button.

Here’s a screenshot from Remember the Milk on the left, and my addition of padding on the right.

input[type="submit"], input[type="button"], button {
	padding: 3px 5px;
}

Just a few pixels, but the difference is huge. You can now read the text of each button with ease. Please, don’t forget the whitespace.