CodePen Embed - CodyFrame

<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--primary 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>

<div class="padding-lg" data-theme="dark">
 <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--primary 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

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

:root {
  --btn-font-size: 1em;
  --btn-padding-x: var(--space-sm);
  --btn-padding-y: var(--space-xxs);
  --btn-radius: var(--radius-md);
}

.btn {
  background: var(--color-bg-dark);
  color: var(--color-contrast-higher);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  @include fontSmooth;
  transition: all 0.2s ease;
  will-change: transform;

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

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

// themes
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: inset 0px 1px 0px  alpha(var(--color-white), 0.15), var(--shadow-xs);

  &:hover {
    background: var(--color-primary-light);
    box-shadow: inset 0px 1px 0px  alpha(var(--color-white), 0.15), var(--shadow-sm);
  }

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

.btn--subtle {
  background: var(--color-bg-light);
  color: var(--color-contrast-higher);
  box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-xs);

  &:hover {
    background: var(--color-bg-lighter);
    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-sm);
  }

  &:focus {
    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.05);
  }
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: inset 0px 1px 0px  alpha(var(--color-white), 0.15), var(--shadow-xs);

  &:hover {
    background: var(--color-accent-light);
    box-shadow: inset 0px 1px 0px  alpha(var(--color-white), 0.15), var(--shadow-sm);
  }

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

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

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

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

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

View Compiled

This Pen is owned by CodyHouse on CodePen.

See more by @codyhouse on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.