<svg style="display: none;">
  <symbol id="icon-dropdown" viewBox="0 0 24 24">
    <path d="M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z" />
  </symbol>

  <symbol id="icon-hot" viewBox="0 0 24 24">
    <path d="M17.09 4.56c-.7-1.03-1.5-1.99-2.4-2.85-.35-.34-.94-.02-.84.46.19.94.39 2.18.39 3.29 0 2.06-1.35 3.73-3.41 3.73-1.54 0-2.8-.93-3.35-2.26-.1-.2-.14-.32-.2-.54-.11-.42-.66-.55-.9-.18-.18.27-.35.54-.51.83C4.68 9.08 4 11.46 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8c0-3.49-1.08-6.73-2.91-9.44zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.47-.3 2.98-.93 4.03-1.92.28-.26.74-.14.82.23.23 1.02.35 2.08.35 3.15.01 2.65-2.14 4.8-4.79 4.8z" />
  </symbol>
</svg>

<main>
  <h1>knopf.css</h1>

  <h2>States</h2>

  <div class="row">
    <button class="knopf" disabled>disabled</button>
    <button class="knopf">default</button>
    <button class="knopf active">active</button>
  </div>

  <h2>Styles</h2>

  <div class="row">
    <button class="knopf inverse">inverse</button>
    <button class="knopf inverse outline">inverse outline</button>
    <button class="knopf inverse outline solid">inverse outline solid</button>
  </div>

  <div class="row">
    <button class="knopf flat">flat</button>
    <button class="knopf flat outline">flat outline</button>
    <button class="knopf flat outline solid">flat outline solid</button>
  </div>

  <div class="row">
    <button class="knopf pale">pale</button>
    <button class="knopf pale outline">pale outline</button>
    <button class="knopf pale outline solid">pale outline solid</button>
  </div>

  <div class="row">
    <button class="knopf link">link</button>
  </div>

  <h2>Corners</h2>

  <div class="row">
    <button class="knopf sharp">sharp</button>
    <button class="knopf pill">pill</button>
  </div>

  <h2>Spacing</h2>

  <div class="row">
    <button class="knopf even">even</button>
    <button class="knopf wide">wide</button>
  </div>

  <h2>Sizes</h2>

  <div class="row">
    <button class="knopf small">small</button>
    <button class="knopf">regular</button>
    <button class="knopf large">large</button>
    <button class="knopf huge">huge</button>
  </div>

  <h2>Icons</h2>

  <div class="row">
    <button class="knopf">
      <svg class="icon">
        <use xlink:href="#icon-hot" />
      </svg>
      <span>Label</span>
    </button>

    <button class="knopf even pill">
      <svg class="icon large">
        <use xlink:href="#icon-hot" />
      </svg>
    </button>
  </div>

  <h2>Block</h2>

  <div class="row">
    <button class="knopf block">block</button>
  </div>

  <h3>Floating Icon</h3>

  <div class="row">
    <button class="knopf block">
      <svg class="icon floating">
        <use xlink:href="#icon-hot" />
      </svg>
      <span>floating icon</span>
    </button>
  </div>

  <div class="row">
    <button class="knopf block">
      <span>floating icon</span>
      <svg class="icon floating">
        <use xlink:href="#icon-hot" />
      </svg>
    </button>
  </div>

  <h3>Alignment</h3>

  <div class="row">
    <button class="knopf block start">
      <svg class="icon">
        <use xlink:href="#icon-hot" />
      </svg>
      <span>start</span>
    </button>
  </div>

  <div class="row">
    <button class="knopf block end">
      <svg class="icon">
        <use xlink:href="#icon-hot" />
      </svg>
      <span>end</span>
    </button>
  </div>

  <h2>Groups</h2>

  <div class="row">
    <div class="knopf-group pill">
      <button class="knopf wide">save</button>
      <button class="knopf flat outline solid">cancel</button>
    </div>

    <span class="knopf-group sharp">
      <button class="knopf flat outline">first</button>
      <button class="knopf flat outline active">second</button>
      <button class="knopf flat outline">last</button>
    </span>

    <span class="knopf-group">
      <button class="knopf">Dropdown</button>
      <button class="knopf even active">
        <svg class="icon">
          <use xlink:href="#icon-dropdown" />
        </svg>
      </button>
    </span>
  </div>

  <h3>Vertical</h3>

  <div class="row">
    <span class="knopf-group vertical">
      <button class="knopf start flat outline">
        <svg class="icon">
          <use xlink:href="#icon-hot" />
        </svg>
        <span>first</span>
      </button>
      <button class="knopf start flat outline active">
        <svg class="icon">
          <use xlink:href="#icon-hot" />
        </svg>
        <span>second</span>
      </button>
      <button class="knopf start flat outline">
        <svg class="icon">
          <use xlink:href="#icon-hot" />
        </svg>
        <span>last</span>
      </button>
    </span>

    <span class="knopf-group vertical sharp">
      <button class="knopf outline">A</button>
      <button class="knopf outline active">B</button>
      <button class="knopf outline">C</button>
    </span>

    <span class="knopf-group vertical">
      <button class="knopf pale">A</button>
      <button class="knopf pale active">B</button>
      <button class="knopf pale">C</button>
    </span>

    <span class="knopf-group vertical">
      <button class="knopf end">first</button>
      <button class="knopf end active">second</button>
      <button class="knopf end">last</button>
    </span>
  </div>
</main>
body {
  display: flex;
  flex-direction: column;
  font-size: 1em;
  line-height: 1.4em;
  min-height: 100vh;
}

@media screen and (min-width: 20em) {
  body {
    font-size: calc(1em + (1.3125 - 1) * ((100vw - 20em) / (80 - 20)));
    line-height: calc(1.4em + (1.8 - 1.4) * ((100vw - 20em) / (80 - 20)));
  }
}

@media (min-width: 80em) {
  body {
    font-size: 1.3125em;
    line-height: 1.8em;
  }
}

main {
  margin: auto;
  padding: 2em;
}

.row {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 33em;
  width: 80vw;
}

.row + .row {
  margin-top: 1em;
}
View Compiled

External CSS

  1. https://unpkg.com/knopf.css

External JavaScript

This Pen doesn't use any external JavaScript resources.