Buttons

How to define buttons easily.

For maximum flexibility later on, the button creation process in _settings.scss is divided into three steps:

  1. Set up the button basics. E.g. padding or font-size
  2. Enable, disable or customize the small and large variant
  3. Set up the button names and the color variants

1. Basic style

The button basics are defined in $button-default-config. You can use regular css here. If you want to optimize padding in Firefox, you can use the -moz- prefix as the browser has issues with vertical text alignment.

2. Additional sizes

In the next step you can create a small or a large variant. Setting $button-small or $button-large to false will prevent code generation.

3. Naming and color variants

Set up the names for the final buttons. E.g. primary will generate a .button-primary.