My ideal button

Button layout with height и line-height

As a designer I’m always trying to review front-end works, testing it. And with the next review, I noticed that the text in the button is a little below the centre. When I opened the Chrome inspector I thought that the cause in wrong paddings or in custom line-height. But I saw this …

.btn {
line-height: 64px;
height: 64px;
font-size: 20px;
vertical-align: top;
}

I decided to test the button. In my previous article I mentioned that we are making a multilingual site and what if our button would be in Spanish or what about unexpected window/device size? Do you see what happens Larri?

For me it looks inappropriate. And the main reason in the button behaviour is line-height and height as well. I was a little bit confused by this approach mostly due to the button turned into log— inflexible peace of code. I’ve always used paddings, but I wondered how other individuals make buttons. And It turned out that this is a very, very frequent manner of making buttons.

Medium has different line-height and hight. But text in buttons a little below centre
Marvel as well
Google
Facebook the same approach. But different vertical centre

Y Tho

There are several reasons

  1. Let’s take for instance the Cancel button. This button is usually next to the Okay button and could have a different font size. The same example with the search form — input and button to the left. So, it could be a problem to manage the height of the cancel button by paddings.
  2. If you are using custom fonts, buttons size could jump a little after your custom font will be loaded.
  3. Furthermore, remembering the old times before modern CSS, where we had to implement border-radius and gradient only by images and it was very important to sustain a certain button size.

Despite the fact that this method isn’t flexible but it has a quite important benefit like precise control of height.

If you want to have more flexibility then paddings without height it’s just what you need. Surely, designers have an oddity and concerns about sizes, actually, we call it “pixel perfect”. But for me, line-height 64px of the button with 16px font-size looks weirder than an extra pixel in button. I don’t believe in pixel perfect.

If you use paddings you could also use max- and min-width to have size ranges.

«Below the centre»

There is one more aspect that is easy to miss if you using a line-height or paddings. I talking about vertical centre. So if your text is not written by the caps (text-transform: uppercase) and located “in the middle” (seems so)

{
line-height: 64px;
height: 64px;
}
/* Or */
{
padding: 20px 40px;
}

The text actually positioned below the visual centre if the values of line-height and hight are the same. You need something such as this

.btn {
line-height: 60px;
height: 64px;
font-size: 20px;
}

The same about padding. Padding-top needs to be smaller than padding-bottom.
Also, don’t forget to set side paddings, it protects your text from edge licking.

.btn {
padding: 20px 30px 24px;
}
.btn {
box-sizing: border-box;
min-width: 270px;
padding: 18px 30px 21px;
font-size: 20px;
}

Who also uses paddings

FramerJS! Our mates!
Farfetch has flexbox grid and right buttons :-)
Netflix
Very good twitter but the text inside bellow the centre
Invision use padding but by some reason bottom-padding smaller than top-padding it supposed to be apposite
UWebDesign as well :-)
And of course, my favourite is Badoo. They know how to manage with multilingual buttons.
But they have a problem in this element due to fixed width

Flexbox

With flexbox for instance you could make buttons layout which stay in line. The buttons placed in the flex-container will automatically be stretched to the height of the highest element. But it sounds tricky and complicated for production.

Forthermore we could use <button> for button <input type=“button” />. In addition post from Chris Coyier https://css-tricks.com/use-button-element

Conclusion?

In the beginning when I’m started to write I thought “I hate these buttons with fixed height!” but during my writing, I changed my mind and now I see that all approaches are useful but for different purposes. And what to choose depends on yourself.


thank you for reading