Buttons

The _buttons.scss file contains all the rules for creating your system of buttons.

Buttons are the most important interactive components used by users to perform actions. Designing buttons means creating a toolkit that allows interaction with an interface.

⚠️ Note: we suggest reading the Typography and Spacing chapters before exploring the Buttons documentation.

Setting the basic button style #

The .btn class is used to define the basic style for all our button components:

.btn {
    display: inline-flex;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 0.25em;
    font-size: 1em;
    color: var(--color-primary);
}

The basic style includes those properties that you don’t plan on overwriting while creating button variations later on, as well as reset style to prevent common style issues. For example:

Padding values are defined according to our spacing system, so that they are automatically responsive.

Style variations #

Style variations are different styles used to convey meaning to buttons.

They include:

Please note that all the colors are defined in a separate _colors.scss file.

The fontSmooth mixin (_mixins.scss) is used to improve font rendering when a light text is used on a dark background.

Since our framework is supposed to be a customizable starting point for web projects of any kind, we didn't include any non-essential style. For example, we didn’t include shadows, or :focus effects, because they will differ in each project. Providing a default style would force our framework adopters to search and overwrite things, as opposed to having the freedom to build upon things.

Size variations #

In addition to style variations, a buttons system should also include size variations. To be clear: I’m not referring to responsive buttons that adapt at different breakpoints, but to having utility classes that can be used to create buttons with different sizes regardless of the viewport size.

Our approach to creating such variations is defining size variables (using the CSS calc() function), and then applying these variables to the size utility classes:

Using icons within buttons #

To align icons and text within a button component, you have two options.

  1. You can use the .btn--icon-text class, which aligns icon and text using Flexbox, and sets automatically a margin between the two elements.
  2. Since each button is a flex container, you can use the alignment classes.

Responsive buttons #

Button components, like all other components in this framework, are based on Em relative units. The current font-size is updated with the --text-base-size variable (check our typography doc page for more info), affecting all properties defined using Ems (e.g., buttons font size and padding).

responsive buttons
A preview of the buttons in our app

Our buttons are already responsive, with no need to create additional media queries within the _buttons.scss file. But if you want more control, go ahead and create them 👍.

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.