Buttons

These buttons look and feel like buttons. When you press them, you'll get some feedback. They have shadows and gradients. Crazy.

Examples

They come in colors!

lightgray gray blue orange pink

darkblue purple magenta green

And sizes!

massive bigger regular smaller tiny

And you can use them with gylphs

+ - × ↑ ↓ ← → » « ∧ ∨

Attribution

These buttons were designed by Julius Csurgo and developed by CSS Flow. Modified for use in Flakes.

Usage

For basic usage, all you need is the button-color class and size modifier.

<a class="button-purple">Purple Button</a>

<a class="button-purple bigger">Bigger Purple Button</a>

Pre-defined button classes

Class Name	Button Preview
button-lightgray	lightgray
button-gray	gray
button-blue	blue
button-orange	orange
button-pink	pink
button-darkblue	darkblue
button-purple	purple
button-magenta	magenta
button-green	green

Pre-defined button sizes

Class Name	Button Preview
massive	massive
bigger	bigger
(no class required)	Regular
smaller	smaller
tiny	tiny

Advanced Usage

For a finer level of control, use the SASS button mixin. Look at the mixin definition below to learn how it works.

@mixin button(
	$button-color: gray,
	$height: 36px,
	$padding-sides: 20px,
	$disabled: false
)

The button mixin accepts 4 optional parameters.

1. button-color: Accepts any one of the following: green, red, blue, orange, pink, gray, lightgray, darkblue, purple, magenta.
2. height: The button's height in pixels
3. padding-sides: Padding in pixels
4. disabled: A boolean (true or false) value determines whether the button is inactive