Buttons
- Display Block
-
The interesting thing about buttons is that, unlike most other elements, display:block does not give buttons a default width of 100%. But it does give them each a separate line.
I generally avoid using display:inline-block because of the mystery-margins; inline-block will add space to the right and below each item. So the buttons are set to display:block, and positioning is controlled via the containers.
- REM Units
- These buttons have no vertical padding. Instead, a line-height in REM units controls the height of the button. Here's an article about REMs. By using REM units to control vertical type spaces, it is easier to make element heights consistent, and to edit type for varying devices.
- Dependencies
- None
- Browser Support
- IE9 forward, and everyone else.
See the Pen Simple Bootstrap Buttons by btn.ninja (@btn-ninja) on CodePen.