Square buttons

Button Button Button Button

Circle buttons

Button Button Button Button

Text buttons

Button Button Button Button

Square border buttons

Button Button Button Button

Circle border buttons

Button Button Button Button

Square icon buttons

Button Button Button Button

Circle icon buttons

Button Button Button Button

Animated buttons

Button Button Button Button

Button sizes

Button small Button small Button small Button small

Button medium Button medium Button medium Button medium

Button large Button large Button large Button large

Input text

Input button

Input select

Input textarea

Usage

<a href="#" class="btn btn-sm">Button</a>

<a class="btn btn-sm btn-icon btn-anima"><i class="im-paper-plane"></i>Button</a>

<input class="input-text" type="text" placeholder="Lorem ipsum dolorem" />

<div class="input-text-btn">
    <input class="input-text" type="text" placeholder="Lorem ipsum dolorem" /><input type="submit" value="Send" class="btn"></input>
</div>

<select class="input-select">
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
</select>

<textarea class="input-textarea" placeholder="Lorem ipsum dolorem"></textarea>

Settings

Name Type Description
Button styles CSS
Square Default style.
Circle Add the class btn-circle to the component.
Text Add the class btn-text to the component. This type don't accept border and circle styles.
Border Add the class btn-border to the component.
Icon HTML - CSS Insert the icon code <i class="icon-name"><i/> inside the component and add the class btn-icon to the component. To get the icons list go to the icons page.
Animation CSS Add the class btn-anima to the component. This feature work only with icon buttons.
Button size CSS
Small Add the class btn-xs to the component.
Medium Add the class btn-sm to the component.
Large Add the class btn-lg to the component.