Github Repo v1.0.1


<a class="button">Default</a>
<a class="button primary">Primary</a>
<a class="button secondary">Secondary</a>
<a class="button outline">Outline</a>
<a class="button outline primary">Primary outline</a>
<a class="button outline secondary">Secondary outline</a>


Class Modifiers

  • button-block - set to display block.

The css-framework does not provide default hover, focus or active states.


Copy these styles for new projects to customize styling.

/* Default Buttons */
.button {
  background: var(--primary-color);
.button.primary {
  color: #fff;
  background: var(--primary-color);
.button.secondary {
  background: var(--darkGrey-color);

/* Outline Buttons */
.button.outline {
  background-color: transparent;
  border: 1px solid var(--lightGrey-color);
.button.outline.primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
.button.outline.secondary {
  border-color: var(--darkGrey-color);
  color: var(--darkGrey-color);

The variables are defined within the :root inside of your stylesheet. Check the starter stylesheet file for more information.