How to Design A Perfect Button
Hi there! 👋
I hope you did well in the first month of 2022, let’s jump into February with this newsletter. 😍
In this week’s newsletter, we will discuss the most important things you have to keep in mind when you’re designing buttons.
Let’s get into it! 👇
Types of Buttons
We have 3 main categories, that you can find on web pages and apps.
Contained button — has a background color.
Outlined button — has only the stroke around the text.
Text button — has no border and no background color, however, we can add some underline, arrow, or something to differentiate the element.
Pay Attention to Hierarchy
The most important button should be the most visible one, right? That’s where we can use the different types of buttons, to indicate the hierarchy to the user. However, we should pay attention not to include more than 3 types of buttons for a simple landing page or screen.
Anatomy of Buttons
There is a common grid that we usually use to design buttons. Using this grid, you can make simple-looking neat icons.
The most popular heights of buttons are: 32px, 34px, and 36px. If the space between the text and the border is “x”, then we should use “2x” for the space between the side of the text and the border on the side. That’s how we’ll get a nicely balanced button.
Text sizes inside the button:
10px — in tables or in the lower hierarchy.
14 / 16px — standard size.
18 / 24px — huge, to distinguish something.
Design
Now it is time to play around with the style of our button. You should try tweaking the color, maybe using gradients, shadows, or different typography. Show your buttons in a special way.
Here are some examples:
This was it for this week. 🙌
If you’ve learned something, don’t forget to like this post, and have an awesome rest of your week! 💜
Useful Websites
Links to websites that can help you as a creative.
Boxicons — Carefully crafted vector icons, perfect for use in your next project.
Veed — A simple & fast way to add subtitles to your videos online.
UI Faces — Free avatar headshots that you can use in your design mockups.