Buttons

<button class="btn">standard</button>
<button class="btn primary">primary</button>
<button class="btn secondary">secondary</button>
<button class="btn success">success</button>
<button class="btn info">info</button>
<button class="btn warning">warning</button>
<button class="btn danger">danger</button>
<button class="btn disabled">disabled</button>

<button class="btn small">standard</button>
<button class="btn primary small">primary</button>
<button class="btn secondary small">secondary</button>
<button class="btn success small">success</button>
<button class="btn info small">info</button>
<button class="btn warning small">warning</button>
<button class="btn danger small">danger</button>
<button class="btn disabled small">disabled</button>

<button class="btn large">standard</button>
<button class="btn primary large">primary</button>
<button class="btn secondary large">secondary</button>
<button class="btn success large">success</button>
<button class="btn info large">info</button>
<button class="btn warning large">warning</button>
<button class="btn danger large">danger</button>
<button class="btn disabled large">disabled</button>

<button class="btn icon ti-heart">standard</button>
<button class="btn primary icon ti-group-work">primary</button>
<button class="btn secondary icon ti-star">secondary</button>
<button class="btn success icon ti-check-a">success</button>
<button class="btn info icon ti-info">info</button>
<button class="btn warning icon  ti-warning">warning</button>
<button class="btn danger icon ti-clear">danger</button>
<button class="btn disabled icon ti-block">disabled</button>

<button class="btn labeled ti-heart">standard</button>
<button class="btn primary labeled ti-group-work">primary</button>
<button class="btn secondary labeled ti-star">secondary</button>
<button class="btn success labeled ti-check-a">success</button>
<button class="btn info labeled ti-info">info</button>
<button class="btn warning labeled ti-warning">warning</button>
<button class="btn danger labeled ti-clear">danger</button>
<button class="btn disabled labeled ti-block">disabled</button>

<button class="btn round-corner">standard</button>
<button class="btn round-corner primary">primary</button>
<button class="btn round-corner secondary">secondary</button>
<button class="btn round-corner success">success</button>
<button class="btn round-corner info">info</button>
<button class="btn round-corner warning">warning</button>
<button class="btn round-corner danger">danger</button>
<button class="btn round-corner disabled">disabled</button>

<button class="btn rounded">standard</button>
<button class="btn rounded primary">primary</button>
<button class="btn rounded secondary">secondary</button>
<button class="btn rounded success">success</button>
<button class="btn rounded info">info</button>
<button class="btn rounded warning">warning</button>
<button class="btn rounded danger">danger</button>
<button class="btn rounded disabled">disabled</button>

<button class="btn ti-heart"></button>
<button class="btn primary ti-group-work"></button>
<button class="btn secondary ti-star"></button>
<button class="btn success ti-check-a"></button>
<button class="btn info ti-info"></button>
<button class="btn warning ti-warning"></button>
<button class="btn danger ti-clear"></button>
<button class="btn disabled ti-block"></button>

<button class="btn outline">standard</button>
<button class="btn primary outline">primary</button>
<button class="btn secondary outline">secondary</button>
<button class="btn success outline">success</button>
<button class="btn info outline">info</button>
<button class="btn warning outline">warning</button>
<button class="btn danger outline">danger</button>
<button class="btn disabled outline">disabled</button>

<div class="dropdown-button">
    <button class="btn dropdown-btn ti-arrow-drop-down">dropdown</button>
    <ul class="dropdown">
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
    </ul>
</div>

<div class="dropdown-button">
    <button class="btn primary dropdown-btn ti-arrow-drop-down">dropdown primary</button>
    <ul class="dropdown">
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
    </ul>
</div>

<div class="dropdown-button">
    <button class="btn secondary dropdown-btn ti-arrow-drop-down">dropdown secondary</button>
    <ul class="dropdown">
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
        <li><a href="#">Dropdown Item</a></li>
    </ul>
</div>

<div class="btns-group">
    <button class="btn large">first</button>
    <button class="btn large">seconde</button>
    <button class="btn large active">third</button>
    <div class="dropdown-button">
        <button class="btn large dropdown-btn ti-arrow-drop-down">dropdown</button>
        <ul class="dropdown">
            <li><a href="#">Dropdown Item</a></li>
            <li><a href="#">Dropdown Item</a></li>
            <li><a href="#">Dropdown Item</a></li>
            <li><a href="#">Dropdown Item</a></li>
            <li><a href="#">Dropdown Item</a></li>
        </ul>
    </div>
</div>

<button class="btn circle small ti-heart"></button>
<button class="btn primary circle ti-heart"></button>
<button class="btn success circle large ti-heart"></button>

<!-- Pagination Buttons -->
<div class="pagination">
    <a href="#" class="btn">1</a>
    <a href="#" class="btn active">2</a>
    <a href="#" class="btn">3</a>
    <a href="#" class="btn">4</a>
    <a href="#" class="btn">5</a>
    <a href="#" class="btn">6</a>
</div>

<!-- Pagination Buttons Group -->
<div class="btns-group pagination">
    <a href="#" class="btn">1</a>
    <a href="#" class="btn active">2</a>
    <a href="#" class="btn">3</a>
    <a href="#" class="btn">4</a>
    <a href="#" class="btn">5</a>
    <a href="#" class="btn">6</a>
</div>