Day 149 - Creating A Design System • Buttons

Buttons are one of the primary ways of interaction on the web. We submit forms with buttons and perform common actions on the web. In this post we will take a look at how we will design button for this design system in SASS.

Core Button

First of all we will define the style for the core button which are the styles which remain the same in all buttons like padding and font size etc. In bootstrap btn class is the core button which will apply the core button styling and the class that comes next like btn-primary will only apply the background color and text color etc of the button.

$color-dark: black;
$color-light: white;

$paddin-btn: 0.25rem 1rem;
$btn-min-width: 6rem;

$btn-blue: var(--blue-500);
$btn-blue-dark: var(--blue-600);

$transtiton-btn: all 0.15s ease-in-out;

These are all the variables that will be used in this post example and follwing are the stylings for the core design of button.

.btn {
  display: inline-block;
  min-width: $btn-min-width;
  font-weight: 500;
  line-height: 1.5;
  color: $color-dark;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  padding: $paddin-btn;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: $transtiton-btn;

  &:active {
    animation: btn-active 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
  }
}

This animation will make the button slide down a little when clicked.

@keyframes btn-click {
  50% {
    transform: translateY(1px);
  }
}

After defining the core button we now can define the colored buttons. These will be the classes that define the color of the buttons here too I will be borrowing name classes from bootstrap with classname as the color name prefixed with btn class.

.btn-blue {
  background-color: $btn-blue;
  color: $color-light;
  border-color: $btn-blue;

  &:hover {
    background-color: $btn-blue-dark;
  }
}

Button Variants

Now that we have a core button and the colored buttons we now can make variants of the button like a small button, a large button and outlined buttons etc.

.btn-blue-outline {
  background-color: $color-light;
  color: $btn-blue;
  border-color: $btn-blue;

  &:hover {
    background-color: $btn-blue;
    color: $color-light;
  }
}

Here the outlined button will have a transparent background and the text color will the color name from the class and on hover background color will change to text color with text color becoming white again.

With small button we only need to decrease the padding and the font-size of the button.

$paddin-btn: 0.25rem 0.5rem;

.btn-small {
  font-size: $font-size-sm;
  padding: $paddin-btn;
}

Same for the large buttons.

$paddin-btn: 0.75rem 1.25rem;

.btn-small {
  font-size: $font-size-lg;
  padding: $paddin-btn;
}
zainscizainsci