The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Button Design: Using Padding vs Height & Vertical Middle

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #201887

    Most (if not all) CSS frameworks use vertical padding to vertically center content within buttons. One of the challenges with this approach is maintaining a consistent button height while allowing for variable button content height.

    For instance, if I have a save button with a font awesome save icon in it, the button height would change if I were to change the icon size to be larger than the font size.

    I’m building a design system where the heights of inputs, buttons, and avatars will be consistent even if there are changes to the fonts or icons on the site.

    Using a combination of the height property and vertical align:middle, I have achieved a solution that appears to work for my use case. Here’s the codepen: and here are some browser shots:

    This appears to be a perfect solution to my problem but I’m wondering why no frameworks or large sites (that I could find) have used this approach.

    Are there potential problems with this? Are there more elegant solutions? I originally was setting the line-height to be the same as the button height but I read that the support for this is problematic in Firefox.

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.