Hello John Doe
My AccountLogout

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