Menu

Buttons

The bread and butter of the web. It's all about the clicks and taps. (Oh, long taps, tripple taps, and throw some pinch and zoom in there too.)

Standard Buttons

We've made some fairly standard buttons and button classes that can be used in a variety of ways. Also, if you are making web apps and mobile friendly sites, consider this article from Google. Creating Fast Buttons for Mobile Web Applications

Anchor Tag
<button>Button</button>
<a href="#" class="button">Anchor Tag</a>

Colored Buttons

We like black. A lot. It makes us think of old, leather bibles. Classy and traditional. But we know that a world without color is not much of a world at all. You can use colors in your buttons if you need to. It's ok.

<button class="blue">Click Me</button>

You can also just use links and give a class 'button' and a color if needed.

<a href="#" class="button blue">Click Me</a>

Rounded Buttons

Fine. You don't always have to be such a square. You can lighten up a bit if you feel like it. From time to time we find it useful to have a softer, more friendly approach to our buttons.

<button class="round">Click Me</button>

Small Buttons

<button class="small">Small Button</button>
<button class="small round">Small Button</button>
<button class="tiny">Small Button</button>
<button class="tiny round">Small Button</button>

Ghost Buttons

Whoa, neat. We're still trying to define the rules around when you use these. Mostly we're just using our gut and design eye. You can to!

Full Width Buttons

From time to time, mostly in web apps and mobile views, we need a button that will span the full width of its container. Most of the time we do this auto magically with media queries. But we've also included a class so that you can do it on desktop versions of your site as well.

<button class="wide">Wide Button</button>