<div class="padding-lg">
  <div class="margin-bottom-lg">
   <h4 class="margin-bottom-sm">Themes</h4>

   <div class="flex flex-wrap gap-xxs">
    <button class="btn">Basic</button>
    <button class="btn btn--primary">Primary</button>
    <button class="btn btn--subtle">Subtle</button>
    <button class="btn btn--accent">Accent</button>
   </div>
  </div>

  <div class="margin-bottom-lg">
   <h4 class="margin-bottom-sm">Feedback</h4>
   <button class="btn btn--disabled">Disabled</button>
  </div>

  <div class="margin-bottom-lg">
   <h4 class="margin-bottom-sm">Sizes</h4>
   <div class="flex flex-wrap gap-xxs items-center">
    <div><button class="btn btn--primary btn--sm">Button sm</button></div>
    <div><button class="btn btn--primary">Button</button></div>
    <div><button class="btn btn--primary btn--md">Button md</button></div>
    <div><button class="btn btn--primary btn--lg">Button lg</button></div>
   </div>
  </div>
  
  <div>
   <h4 class="margin-bottom-sm">Icons</h4>
   <div class="flex flex-wrap gap-xxs">
    <button class="btn btn--subtle btn--icon">
     <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Add to favorites</title><g><path d="M14.682,2.318c-1.757-1.757-4.607-1.757-6.364,0C8.197,2.439,8.104,2.577,8,2.707 C7.896,2.577,7.803,2.439,7.682,2.318c-1.757-1.757-4.607-1.757-6.364,0c-1.757,1.757-1.757,4.607,0,6.364L8,15l6.682-6.318 C16.439,6.925,16.439,4.075,14.682,2.318z"></path></g></svg>
    </button>
    
    <button class="btn btn--primary">
     <svg class="icon margin-right-xxxs" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm2.629,11.618L8,10.236,5.371,11.618l.5-2.927L3.747,6.618l2.939-.427L8,3.528,9.314,6.191l2.939.427L10.127,8.691Z"></path></svg>
     <span>Button</span>
    </button>
   </div>
  </div>
 </div>
// --------------------------------

// Buttons | ­čÉ×CodyFrame https://codyhouse.co/ds/get-started

// --------------------------------

.btn { // style affecting all buttons
  --btn-padding-y: var(--space-xxs); // padding top/bottom
  --btn-padding-x: var(--space-sm); // padding left/right
  --btn-radius: 0.25em; // border radius
  --btn-font-size: 1em; // font size
  line-height: 1.2;
  box-shadow: var(--shadow-xs);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: .2s;
  
  &:hover {
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }

  &:focus {
    outline: none;
    box-shadow: 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.15);
  }

  &:active {
    transform: translateY(2px);
  }
}

// themes
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);

  &:hover {
    background-color: var(--color-primary-dark);
  }

  &:focus {
    box-shadow: 0px 0px 0px 2px alpha(var(--color-primary), 0.2);
  }
}

.btn--subtle {
  background-color: var(--color-contrast-lower);
  color: var(--color-contrast-higher);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-white);

  &:hover {
    background-color: var(--color-accent-dark);
  }

  &:focus {
    box-shadow: 0px 0px 0px 2px alpha(var(--color-accent), 0.2);
  }
}

// feedback
.btn--disabled,
.btn[disabled], 
.btn[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

// sizes
.btn--sm {
  font-size: 0.8em;
}

.btn--md {
  font-size: 1.2em;
}

.btn--lg {
  font-size: 1.4em;
}
View Compiled

External CSS

  1. https://assets.codepen.io/148866/codyframe-2-7-6-all-but-buttons.css
  2. https://codepen.io/codyhouse/pen/oNxLjqp

External JavaScript

This Pen doesn't use any external JavaScript resources.