Header Buttons

First

<button class="btn-header btn-1">Button</button>
<button class="btn-header btn-1 btn-empty">Empty</button>
<button class="btn-header btn-1 btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-header btn-1 btn-hover-empty">Hover Empty</button>
<button class="btn-header btn-1 btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-header btn-1 btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Second

<button class="btn-header btn-2">Button</button>
<button class="btn-header btn-2 btn-empty">Empty</button>
<button class="btn-header btn-2 btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-header btn-2 btn-hover-empty">Hover Empty</button>
<button class="btn-header btn-2 btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-header btn-2 btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Bootstrap Buttons

Default

<button class="btn-default">Button</button>
<button class="btn-default btn-empty">Empty</button>
<button class="btn-default btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-default btn-hover-empty">Hover Empty</button>
<button class="btn-default btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-default btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Primary

<button class="btn-primary">Button</button>
<button class="btn-primary btn-empty">Empty</i></button>
<button class="btn-primary btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-primary btn-hover-empty">Hover Empty</button>
<button class="btn-primary btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-primary btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Success

<button class="btn-success">Button</button>
<button class="btn-success btn-empty">Empty</button>
<button class="btn-success btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-success btn-hover-empty">Hover Empty</button>
<button class="btn-success btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-success btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Info

<button class="btn-info">Button</button>
<button class="btn-info btn-empty">Empty</button>
<button class="btn-info btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-info btn-hover-empty">Hover Empty</button>
<button class="btn-info btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-info btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Warning

<button class="btn-warning">Button</button>
<button class="btn-warning btn-empty">Empty</button>
<button class="btn-warning btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-warning btn-hover-empty">Hover Empty</button>
<button class="btn-warning btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-warning btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Danger

<button class="btn-danger">Button</button>
<button class="btn-danger btn-empty">Empty</button>
<button class="btn-danger btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-danger btn-hover-empty">Hover Empty</button>
<button class="btn-danger btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-danger btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

 

Additional Buttons

Red

<button class="btn-red">Button</button>
<button class="btn-red btn-empty">Empty</button>
<button class="btn-red btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-red btn-hover-empty">Hover Empty</button>
<button class="btn-red btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-red btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Pink

<button class="btn-pink">Button</button>
<button class="btn-pink btn-empty">Empty</button>
<button class="btn-pink btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-pink btn-hover-empty">Hover Empty</button>
<button class="btn-pink btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-pink btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Purple

<button class="btn-purple">Button</button>
<button class="btn-purple btn-empty">Empty</button>
<button class="btn-purple btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-purple btn-hover-empty">Hover Empty</button>
<button class="btn-purple btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-purple btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Deep Purple

<button class="btn-deep-purple">Button</button>
<button class="btn-deep-purple btn-empty">Empty</button>
<button class="btn-deep-purple btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-deep-purple btn-hover-empty">Hover Empty</button>
<button class="btn-deep-purple btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-deep-purple btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Indigo

<button class="btn-indigo">Button</button>
<button class="btn-indigo btn-empty">Empty</button>
<button class="btn-indigo btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-indigo btn-hover-empty">Hover Empty</button>
<button class="btn-indigo btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-indigo btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Blue

<button class="btn-blue">Button</button>
<button class="btn-blue btn-empty">Empty</button>
<button class="btn-blue btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-blue btn-hover-empty">Hover Empty</button>
<button class="btn-blue btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-blue btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Light Blue

<button class="btn-light-blue">Button</button>
<button class="btn-light-blue btn-empty">Empty</button>
<button class="btn-light-blue btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-light-blue btn-hover-empty">Hover Empty</button>
<button class="btn-light-blue btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-light-blue btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Cyan

<button class="btn-cyan">Button</button>
<button class="btn-cyan btn-empty">Empty</button>
<button class="btn-cyan btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-cyan btn-hover-empty">Hover Empty</button>
<button class="btn-cyan btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-cyan btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Teal

<button class="btn-teal">Button</button>
<button class="btn-teal btn-empty">Empty</button>
<button class="btn-teal btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-teal btn-hover-empty">Hover Empty</button>
<button class="btn-teal btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-teal btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Green

<button class="btn-green">Button</button>
<button class="btn-green btn-empty">Empty</button>
<button class="btn-green btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-green btn-hover-empty">Hover Empty</button>
<button class="btn-green btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-green btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Light Green

<button class="btn-light-green">Button</button>
<button class="btn-light-green btn-empty">Empty</button>
<button class="btn-light-green btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-light-green btn-hover-empty">Hover Empty</button>
<button class="btn-light-green btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-light-green btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Lime

<button class="btn-lime">Button</button>
<button class="btn-lime btn-empty">Empty</button>
<button class="btn-lime btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-lime btn-hover-empty">Hover Empty</button>
<button class="btn-lime btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-lime btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Yellow

<button class="btn-yellow">Button</button>
<button class="btn-yellow btn-empty">Empty</button>
<button class="btn-yellow btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-yellow btn-hover-empty">Hover Empty</button>
<button class="btn-yellow btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-yellow btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Amber

<button class="btn-amber">Button</button>
<button class="btn-amber btn-empty">Empty</button>
<button class="btn-amber btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-amber btn-hover-empty">Hover Empty</button>
<button class="btn-amber btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-amber btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Orange

<button class="btn-orange">Button</button>
<button class="btn-orange btn-empty">Empty</button>
<button class="btn-orange btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-orange btn-hover-empty">Hover Empty</button>
<button class="btn-orange btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-orange btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Deep Orange

<button class="btn-deep-orange">Button</button>
<button class="btn-deep-orange btn-empty">Empty</button>
<button class="btn-deep-orange btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-deep-orange btn-hover-empty">Hover Empty</button>
<button class="btn-deep-orange btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-deep-orange btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Brown

<button class="btn-brown">Button</button>
<button class="btn-brown btn-empty">Empty</button>
<button class="btn-brown btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-brown btn-hover-empty">Hover Empty</button>
<button class="btn-brown btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-brown btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Grey

<button class="btn-grey">Button</button>
<button class="btn-grey btn-empty">Empty</button>
<button class="btn-grey btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-grey btn-hover-empty">Hover Empty</button>
<button class="btn-grey btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-grey btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>

Blue Grey

<button class="btn-blue-grey">Button</button>
<button class="btn-blue-grey btn-empty">Empty</button>
<button class="btn-blue-grey btn-empty icon-right">Empty with Icon <i class="tempo-icon-heart-1"></i></button>
<button class="btn-blue-grey btn-hover-empty">Hover Empty</button>
<button class="btn-blue-grey btn-hover-empty icon-left"><i class="tempo-icon-heart-1"></i> Left Icon</button>
<button class="btn-blue-grey btn-hover-empty icon-right">Right Icon <i class="tempo-icon-heart-1"></i></button>
sianezbrandon@mailxu.com