Buttons

This theme has a couple of types of buttons, from plain buttons with just text to buttons with icons. The default buttonss use the the 10px size icons from our custom made icon set.

Text only

Basic text buttons with no icons.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" class="button-text">Text button</a>
<button class="button-text">Imagelist</button>
<input type="submit" value="Imagelist" class="button-text">

Icon + Text

Basic buttons with a 10px icon and text. Icons can be found here.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" class="button-icon-text"><span class="imagelist-10 plix-10"></span> Imagelist</a>

Text + Icon

Basic buttons with text and a 10px icon. Icons can be found here.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" class="button-text-icon">Imagelist <span class="imagelist-10 plix-10"></span></a>

Button with indicator

Basic text buttons with indicators.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" class="button-text">Imagelist <p>23</p></a>

Split button - Icon + Text

Split buttons with a 10px icon and text. These buttons cant be changed in size or color. Icons can be found here.

How to use

How to use HTML elements.

Markup
<div class="button-split">
    <a href="javascript:void(0);"><span class="download-10 plix-10"></span></a>
    <a href="javascript:void(0);">Download</a>
</div>

Split button - Text + Icon

Split buttons with text and a 10px icon. These buttons cant be changed in size or color. Icons can be found here.

How to use

How to use HTML elements.

Markup
<div class="button-split-rev">
    <a href="javascript:void(0);">Download</a>
    <a href="javascript:void(0);"><span class="download-10 plix-10"></span></a>
</div>

Button sizes

The buttons come in 3 sizes(24px, 30px, 40px and 50px). The size class can be used for most button types.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" class="button-text button-small">Small Button</a> 	
<a href="javascript:void(0);" class="button-text">Imagelist</a>
<a href="javascript:void(0);" class="button-text button-large">Download</a>
<a href="javascript:void(0);" class="button-text button-big">Download</a>

Buttons with other colors

U can use non-theme colors. Icons can be found here.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" class="button-text custom-blue"> Imagelist</a>

Grouped icons

Chained icons in a button. You can use as much of icons if you want. Icons can be found here.

How to use

How to use HTML elements.

Markup
<div class="icon-group"> 
    <a href="javascript:void(0);"><span class="pencil-10 plix-10"></span></a>
    <span></span>
    <a href="javascript:void(0);"><span class="trashcan-10 plix-10"></span></a>
    <span></span>
    <a href="javascript:void(0);"><span class="folder-10 plix-10"></span></a>  
    <span></span>
    <a href="javascript:void(0);"><span class="home-10 plix-10"></span></a>                                          
</div>

Social buttons

Use social buttons to increase your sales. You can choose form more than 100 social icons in 3 sizes.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" class="button-social">
    <span><img src="images/icons/social/16/facebook.png" alt=""/></span>
    <p>Be a Facebook fan</p>
</a>

<a href="javascript:void(0);" class="button-social-big">
    <span><img src="images/icons/social/24/facebook.png" alt=""/></span>
    <h3>Be a Facebook fan</h3>
    <p>Like and share us, do it now</p>
</a>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
button-text a | button | input(submit | button) Basic button with only text 1.0
button-icon-text a | button | input(submit | button) Basic button with text and icon(icon left) 1.0
button-text-icon a | button | input(submit | button) Basic button with text and icon(icon right) 1.0
button-split div Split button with text and icon(icon left) 1.0
button-split-rev div Split button with icon and text(icon right) 1.0
button-small a | button | input(submit | button) Small button size (default has no size class). Height = 24px. 1.0
button-large a | button | input(submit | button) Big button size (default has no size class) . Height = 40px. 1.0
button-big a | button | input(submit | button) Big button size (default has no size class). Height = 50px. 1.0
button-full-width a | button | input(submit | button) Full width buttons. An example can be found here. 1.0
imagelist-10 span Custom made icon class. More about the icons can be found here. 1.0
tags-10 span Custom made icon class. More about the icons can be found here. 1.0
plix-10 span 10px custom pixel icons size class. 1.0
plix-16 span 16px custom pixel icons size class. 1.0
custom-red a | button | input(submit | button) Custom color: red. 1.0
custom-green a | button | input(submit | button) Custom color: green. 1.0
custom-blue a | button | input(submit | button) Custom color: blue. 1.0
custom-purple a | button | input(submit | button) Custom color: purple. 1.0
custom-orange a | button | input(submit | button) Custom color: orange. 1.0
custom-black a | button | input(submit | button) Custom color: black. 1.0
custom-grey a | button | input(submit | button) Custom color: grey. 1.0