<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
This Pen doesn't use any external JavaScript resources.