| 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. |