Really cool and simple CSS3 buttons to give your application a smooth feel.

Button Class Description
button Standard gray button with gradient
button primary Provides extra visual weight and identifies the primary action in a set of buttons
button info Used as an alternative to the default styles
button positive Indicates a positive action
button success Indicates a successful action
button warning Indicates caution should be taken with this action
button negative Indicates a dangerous or potentially negative action
button dark Alternate dark gray button, not tied to a semantic action or use
button disabled Describe a disabled button
button pill Creates pill button

Size modifiers

Add the .button-mini , .button-small or .button-large class to a button to make it smaller or larger.


Add the .button-mini , .button-small or .button-large class to a button to make it smaller or larger.

Add icon to button

Add i tag as <i class='icon-name'></i> e.g. <i class='i-bull-horn'></i>

Add icon as box

Add icon in box <button class='button box'> Default Button <i class='i-bull-horn'></i></button>

Change icon direction with box

There are two option left and right. default is right so we don't need to mention it.

To change box direction to left side. Just add left class as following code

<button class='button box left'> Default Button <i class='i-bull-horn'></i></button>

Button Groups

You can create button groups in two ways

Wrap inside a container Easy way

Just wrap inside buttons-group and add button to every button inside stack.

Use classes

Mention classes group-left for leftmost button and group-middle for all Middle buttons and finish with group-right