Good button design rules | UXPUB

Hello friend-pie. This is going to be a super short article in which I will give you some basic rules to help you design adequate buttons for websites.
I can already see how you pull your fingers to the keyboard to write about the fact that you yourself know everything, and the article is useless. But let s be honest, most designers still make layouts in the Russian Behance style for Elena flower shops, and it looks extremely awful.

Okay, don t be angry, let s repeat the triviality together, and beginners will learn something new)

1. Horizontal padding

Do not make the buttons too narrow or too wide, the ideal indentation for comfortable interaction with the button is 32PX on both sides.

2. Vertical padding

Also, the button should not be too high or flat.
18 PX is what you need.

3. Font and its size

Do not use too large or small font size, 16pt is the best option. It is also worth noting that too thin a font style can be difficult to read.
A separate cauldron in hell awaits all designers who use absolutely all buttons kaaaaaps!
Is it convenient for you to read a book in which EVERYTHING is written WITH a capital LETTER? So the user is also not very good. Also, if you are not already good at typography, try not to use some complicated serif or slant type fonts. They are difficult to pair with other fonts, so try something simple and common: Roboto, San Francisco, or Montserrat.

4. A few more rules

Use a multiple of 2 px for the radius of curvatures, so it will be easier for you to combine it with other rounded elements in your design.
Avoid gradients! For the most part, they greatly reduce the cost of design and make the text in the button difficult to read. If you want to add volume, then replace the gradient with a shadow.

Conclusion

Rules are made to be broken, so feel free to experiment!
Pay more attention to the design of the products you admire. And the main thing in this life is not to use, SU # * A, CAPS In the buttons!

More interesting articles and materials in my Telegram channel
You can download my Figma source and play with some simple examples.
Hugged, lifted!