Buttons

Basic buttons

The template provides an uniform styling on buttons and links, with several sizes:

class="button tiny"

Button Link

class="button compact"

Button Link

class="button"

Button Link

class="button big"

Button Link

class="button huge"

Button Link

class="button huge full-width"

Link

Of course, the buttons can benefit from the template's color sets:

Gradients

Black Anthracite Grey White Red Orange Green Blue

Glossy gradients

Black Anthracite Grey White Red Orange Green Blue

Icons

Buttons can take icons, as everything else:

Create Save Duplicate Delete

<a href="#" class="button icon-star">Create</a>

States

The buttons can have several states: disabled and active. Disabled gives the same style as buttons with the disabled attribute set, and active is the same style as when the user presses a button:

Disabled

Button with class disabled Button with attribute disabled Link

Note that adding the class disabled only affects the look of the button, it does not prevent the action. If you want the template to do so, this can be done using event delegation:

$(document).on('click', '.disabled', function(event)
{
event.preventDefault();
});

Disabled elements preserve the original color:

Black Anthracite Grey White Red Orange Green Blue

Active

Button Link

The active color may be different from the original button's color, using one of the dedicated classes (try clicking the buttons):

class="black-active" class="anthracite-active" class="grey-active" class="white-active" class="red-active" class="orange-active" class="green-active" class="blue-active"

Button icon segment

This is a special style for button icons, it may take some text too:

Create Save 25 New messages Delete

It may be colored and glossy:

Create Save 25 New messages Delete

<!-- Green with icon -->
<a href="javascript:void(0)" class="button">
	<span class="button-icon green-gradient"><span class="icon-download"></span></span>
	Save
</a>
<!-- Glossy blue with text -->
<a href="javascript:void(0)" class="button margin-right">
	<span class="button-icon blue-gradient glossy">25</span>
	New messages
</a>
<!-- Right side -->
<a href="javascript:void(0)" class="button margin-right">
	Delete
	<span class="button-icon right-side"><span class="icon-trash"></span></span>
</a>

Groups

Buttons can be grouped:

Create Save Duplicate Delete

<span class="button-group">
	<a href="#" class="button">Create</a>
	<a href="#" class="button">Save</a>
	<a href="#" class="button">Duplicate</a>
	<a href="#" class="button">Delete</a>
</span>

They can also act as radios of checkboxes (requires the input plugin)

<span class="button-group">
	<label for="radio-buttons-1" class="button green-active">
		<input type="radio" name="radio-buttons" id="radio-buttons-1" value="1">
		Radio 1
	</label>
	<label for="radio-buttons-2" class="button green-active">
		<input type="radio" name="radio-buttons" id="radio-buttons-2" value="2">
		Radio 2
	</label>
	<label for="radio-buttons-3" class="button green-active">
		<input type="radio" name="radio-buttons" id="radio-buttons-3" value="3" checked>
		Radio 3
	</label>
</span>

<span class="button-group">
	<label for="checkbox-buttons-1" class="button green-active">
		<input type="checkbox" name="checkbox-buttons" id="checkbox-buttons-1" value="1">
		Checkbox 1
	</label>
	<label for="checkbox-buttons-2" class="button green-active">
		<input type="checkbox" name="checkbox-buttons" id="checkbox-buttons-2" value="2" checked>
		Checkbox 2
	</label>
	<label for="checkbox-buttons-3" class="button green-active">
		<input type="checkbox" name="checkbox-buttons" id="checkbox-buttons-3" value="3">
		Checkbox 3
	</label>
</span>

Button icon segment

This is a special style for button icons, it may take some text too:

Create Save 25 New messages Delete

They may be colored and glossy:

Create Save 25 New messages Delete

Left side button icon

<a href="#" class="button">
	<span class="button-icon"><span class="icon-star"></span></span>
	Create
</a>

Right side button icon, with custom color and glossy

<a href="#" class="button">
	<span class="button-icon right-side green-gradient glossy"><span class="icon-star"></span></span>
	Create
</a>

For RTL version, the segment will be on the right, use left-side for reversed mode.