Style swicher

Create your own color schema.

Normal instance:







Hover/on:








download now from Code Canyon

Sample Buttons

The "buttons" can be created by adding class="button blue" to any appropriate <a>, <button>, or <input> element.

Code:

<a href="#button" class="button black">Standard button</a>
<input class="button black minimal first" type="submit" value="Minimal button">
<button class="button black rounded" type="submit">Rounded button</button>
<a href="#" class="button black small">Button small</a>
<a href="#" class="button black big on">Button big</a>
<a href="#button" class="button black icon database">Icon button</a>

Result:

Standard button Button small Button big Icon button

Grouped buttons + icons

Grouped buttons - standard

Code:

<div class="button-group">
    <a href="#" class="button black first">Button 1</a>
    <a href="#" class="button black">Button 2</a>
    <a href="#" class="button black">Button 3</a>
    <a href="#" class="button black">Button 4</a>
</div>

Result:

Grouped buttons - rounded

Code:

<div class="button-group">
	<a href="#" class="button black rounded">Button 1</a>
	<a href="#" class="button black first rounded">Button 2</a>
	<a href="#" class="button black rounded">Button 3</a>
	<a href="#" class="button black rounded">Button 4</a>
</div>

Result:

Grouped buttons - minimal

Code:

<div class="button-group">
	<a href="#" class="button blue minimal">Dashboard</a>
	<a href="#" class="button blue first minimal">Inbox</a>
	<a href="#" class="button blue minimal">Account</a>
	<a href="#" class="button blue minimal">Logout</a>
</div>

Result: