Buttons are very important in terms of UI elements. First of all, there is a lot of problems with buttons, and, second of all, buttons are what gets people paid because ultimately if there is an online business or something, there is a button somewhere that says, 'Give me your money' or 'Pay' or 'Check out', and that kind of keeps the whole internet going. So, buttons are really, really important.
So, a couple of things about the button: it has an internal margin called 'padding'. It has an external margin just called 'margin'. It can have a color, a weight and a font for the label on it, a different color, corner style, a color or gradient fill. And, no, we don't fill buttons with photos. And it can have a shadow. Most buttons out there, or maybe at least 50% of them, have the same problem. And, hopefully, you can see it here. I'm just going to give you a second.
I'm going to drink some water; and if you see it, then you're already on the good path. Okay, this button has a label that's not vertically in the center of the button. And this is a really big problem because it makes our brain process it like a fraction of a millisecond longer. And if you have a lot of elements like that in your layout, it's just going make it more difficult in the long run. So, if you use a simple rule of just adding guides and going through the middle of every side of the button, of the button shape,
and then positioning the text exactly in the center, that's going to put you ahead already because this is something most people do wrong. This is something that is so common and it's so easy to fix that it's just mind-blowing. And just this one thing is going to take your designs to the next level. Of course, once you notice things like that, you can look at everything that way. So, if there is a title on a card and it's a little bit off-center, just place it in the center.
If it's a different margin than something else, just fix the margin. Another common problem is not enough space on the button or just bad alignment overall. So, this is also a very common one while we try to fit a longer text on a smaller button. And this is really bad as well because those vertical lines, the left edge of the button and the left edge of the text are actually kind of merging together in our head, and then the right edge does the same thing. So, it creates a lot of those vertical lines
to process for us and that makes it harder and longer to process. So, it's just harder to read that way, and there is a very easy solution to this. If the distance from the bottom is X, let's say, then just use 2X on the sides. But there is an even easier way; if you use the W of the same font – and that's because that's one of the widest letters – if you use the W of the same font next to it on the top, bottom and left and right and then a double W on the sides,
you should be completely fine, but at least a single W on every side would make a button just simply faster to process and just easier to read. So, single is good, double is even better. And you can see it here as well in a typical example. This button on the left is just harder to read and then just this one little change makes it instantly a lot better. So, once we're talking buttons, there's one other thing that most junior designers do
quite a lot, and it should be really clear that what buttons are saying is important. So, don't have them say 'Next' or 'Continue', but instead always state clearly what will happen *after* they click the button. So, a label called Next is just not helpful because they don't know what's next. They don't know what's going to happen. And another thing, rectangular shapes or underlined links are much faster to process as a button,
of course, and if they have a shadow, they're even a little bit faster still. So, a blobby weird shape if you want to have this as a button is always going to be processed slower and in some cases people might not even click on it at all. So, just keep your buttons rectangular – it's just the best way.