<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>
   <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>
// Buttons | ­čÉ×CodyFrame https://codyhouse.co/ds/get-started
:root {
  --btn-font-size: 1em;
  --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);
  --btn-font-size-md: calc(var(--btn-font-size) + 0.2em);
  --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);
  --btn-padding-x: var(--space-sm); // padding left + right
  --btn-padding-y: var(--space-xs); // padding top + bottom
  --btn-radius: 0.25em;
}

.btn { // style affecting all buttons
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  @include fontSmooth;
  transition: .3s;

  &:hover {
    box-shadow: var(--shadow-sm);
  }

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

  &: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 {
  opacity: 0.6;
  cursor: not-allowed;
}

// sizes
.btn--sm {}
.btn--md {}
.btn--lg {}
View Compiled

External CSS

  1. https://unpkg.com/codyhouse-framework/main/assets/css/style.css
  2. https://codepen.io/codyhouse/pen/Wqvpmm

External JavaScript

This Pen doesn't use any external JavaScript resources.