Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications.

Made by Frameable, the team behind Social hour and Subtask.

Just download and include the minified stylesheet on your website.

<link rel="stylesheet" href="/knopf.min.css">

You could also link to a CDN hosted file.

<link rel="stylesheet" href="https://unpkg.com/knopf.css/knopf.min.css">

Otherwise, you can use your favorite package manager to install it as a dependency.

npm install knopf.css

yarn add knopf.css

And then import it wherever you are importing your styles.

import 'knopf.css'

By including knopf you get a bunch of goodies out of the box; however, you should probably customize the styles to meet your design needs, and there are multiple ways of doing just that.

All of the base values can be changed by overriding the custom properties at root:

:root {
  --knopf-hue: 164;
  --knopf-saturation: 88%;
  --knopf-luminosity: 28%;
}

<button class="knopf">
  Button
</button>

You can also create your own class that sets new values for a particular instance:

.negative {
  --knopf-hue: 356;
  --knopf-saturation: 57%;
  --knopf-luminosity: 51%;
}

<button class="knopf negative">
  Button
</button>

As with any CSS library, you can override the base class to make it your own. This aproach still lets you take advantage of the existing properties, variables and modifiers.

.knopf.knopf {
  --knopf-raised-height: 6px;
  border-block-end-color: hsl(var(--knopf-hover-background-color));
  border-block-end-width: var(--knopf-raised-height);
  margin-block-start: calc(var(--knopf-raised-height) * -1);
}

.knopf.knopf:hover {
  --knopf-raised-height: 2px;
  border-block-end-color: hsl(var(--knopf-active-background-color));
}

<button class="knopf large wide pill">
  Button
</button>

The same logic is applicable to all of the built-in modifiers, try out the playground to check them out.

I would also suggest taking a look at the source code for the full list of customizable custom properties.

You can see the full test suite on this pen.

Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.