btn.css

A scalable, style-able button.

Installation

Script tag:

<link rel="stylesheet" href="https://unpkg.com/[email protected]" />

Node:

npm install [email protected]

The code

This is .btn all the code.

/*! btn.css */
.btn {
  font-size: 1em;
  line-height: 2em;
  display: inline-block;
  padding: 0 1em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Usage

Modifiers

Extend .btn with classes of your own.

Creating a new classes that define color, background-color and border-color.

.my-fancy-outline-btn {
  color: blue;
  background-color: transparent;
  border-color: currentColor;
}
.my-fancy-outline-btn:hover {
  color: white;
  background-color: blue;
  border-color: blue;
}
.my-fancy-outline-btn:active {
  color: whitesmoke;
  background-color: darkblue;
  border-color: darkblue;
}

Adapters

Chances are you're buttons share a common theme. Make an adapter for .btn in your app.

/* my app's .btn */
.btn {
  border-radius: 4px;
  box-shadow: 0 4px 3px -2px rgba(0,0,0,0.3);
}

Scale

Scale .btn by changing font-size.

.my-big-btn { font-size: 2em }

You can also scale one-off buttons right on element.

<button class="btn" style="font-size: 20em">Super Button</button>

More examples

chantastic.org/btn.css

<3 @chantastic