Web Interface  |  Buttons

Sizes

This section is about how buttons of different sizes should look and how button size affects other elements.

01Small button

It is better to increase the font size in small buttons. This makes the button label more readable. Although in general, it is questionable the use of small buttons. They are difficult to click by cursor or tap by finger on mobile.

The font size of the button is too small, it is inconvenient to read.
That's better. Even though the button is small, but thanks to the size of the font, the readability is good.

02Big button

Big buttons with a huge font size in them usually look out of proportion to the overall design and does not solve any problem. It is enough to make the font size slightly larger than the regular button.

The font size is too large, most likely it will be disproportionate to the surrounding text size on the page.
The font size in the big button is tslightly larger than in the regular button.

03Button height

If the button is to the right or left of the input, it must be the same height as the input. This simple rule should be considered at the design stage of the interface and create all the inputs and buttons of the same height.

The input and button have different heights. The unity of style is broken.
The input and button are the same height.