beautons – a beautifully simple button toolkit

Follow @csswizardry

Download or View on GitHub

Button Class Description
Basic
.btn Plain ol’ regular button.
Sizes
.btn .btn--small Smaller-than-normal button.
.btn .btn--large Large button.
.btn .btn--huge Huge button.
.btn .btn--full Full-width button.
Font sizes
.btn .btn--alpha Huge text button.
.btn .btn--beta Big text button.
.btn .btn--gamma Regular text button.
Functions
.btn .btn--positive Positive actions, like ‘download’ or ‘log in’.
.btn .btn--negative Destructive actions, like ‘delete’ or ‘unfriend’.
.btn .btn--inactive Disabled buttons.
Styles
.btn .btn--soft Rounded, pill-like buttons.
.btn .btn--hard Hard, non-rounded buttons.
Combinations
.btn .btn--large .btn--positive Hard, non-rounded buttons.
.btn .btn--negative .btn--full .btn--soft Full-width, rounded, negative button.
.btn .btn--positive .btn--alpha .btn--small Small, positive button with huge text.

A in a paragraph.

.btn .btn--natural A button in a parent element.