In CSS:

A few important notes: first of all, all the colors are defined in a separate _colors.scss file. While working on our framework, we decided to have a single source of truth storing all the colors and themes. For more information, you can check our article on this topic.

Here is a peek at how button colors are defined in our _colors.scss file:

The fontSmooth mixin is used to improve font rendering when a light text is used on a dark background. It’s quite common to see this style applied to all HTML elements these days. After doing some research, we opted for creating a mixin to target specific elements, rather than including this style in our global _reset.scss file.

Since our framework is supposed to be a customizable starting point for web projects of any kind, I tried not to include any non-essential style. For example, I 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 adopt at different breakpoints, but to having utility classes to create buttons with different sizes regardless of the viewport size.

A good 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

In our article on icons in a design system, we explain how to align icons and text. We can use the same .icon-text-aligner class to align text labels and icons within buttons:

Since we may have a button that does not include text but only an icon, it’s a good idea to target the .icon inside the basic .btn class, and make sure the icon inherits the default color of the button label (even if the label is not there):

Button groups

Another classic use case worth including in a global CSS file is a button group. Luckily, Flexbox makes it easy to lay buttons in a simple one-dimensional layout:

Responsive buttons

If you’ve been following our series on design systems so far, you know our responsive approach relies on two CSS variables: --text-base-size and --space-unit . Updating these variables using media queries creates a cascade effect that affects the entire design system, including buttons.