Theme Configurator

Header Options
Navbar Options

Buttons Components

Buttons with icons


<h3>Font Awesome Icons</h3>
<a href="#" class="btn btn-xs btn-raised btn-primary"><i class="fa fa-coffee"></i>  Button</a>
<a href="#" class="btn btn-xs btn-primary"><i class="fa fa-coffee"></i> Button</a>

<a href="#" class="btn btn-sm btn-raised btn-primary"><i class="fa fa-star"></i>  Button</a>
<a href="#" class="btn btn-sm btn-primary"><i class="fa fa-star"></i> Button</a>

<a href="#" class="btn btn-raised btn-primary"><i class="fa fa-download"></i>  Button</a>
<a href="#" class="btn btn-primary"><i class="fa fa-download"></i> Button</a>

<a href="#" class="btn btn-lg btn-raised btn-primary"><i class="fa fa-flag"></i>  Button</a>
<a href="#" class="btn btn-lg btn-primary"><i class="fa fa-flag"></i> Button</a>

<a href="#" class="btn btn-xlg btn-raised btn-primary"><i class="fa fa-cloud"></i>  Button</a>
<a href="#" class="btn btn-xlg btn-primary"><i class="fa fa-cloud"></i> Button</a>

<h3>Material Design Iconic Font</h3>
<a href="#" class="btn btn-xs btn-raised btn-royal"><i class="zmdi zmdi-coffee"></i>  Button</a>
<a href="#" class="btn btn-xs btn-royal"><i class="zmdi zmdi-coffee"></i> Button</a>

<a href="#" class="btn btn-sm btn-raised btn-info"><i class="zmdi zmdi-star"></i>  Button</a>
<a href="#" class="btn btn-sm btn-info"><i class="zmdi zmdi-star"></i> Button</a>

<a href="#" class="btn btn-raised btn-success"><i class="zmdi zmdi-download"></i>  Button</a>
<a href="#" class="btn btn-success"><i class="zmdi zmdi-download"></i> Button</a>

<a href="#" class="btn btn-lg btn-raised btn-warning"><i class="zmdi zmdi-flag"></i>  Button</a>
<a href="#" class="btn btn-lg btn-warning"><i class="zmdi zmdi-flag"></i> Button</a>

<a href="#" class="btn btn-xlg btn-raised btn-danger"><i class="zmdi zmdi-cloud"></i>  Button</a>
<a href="#" class="btn btn-xlg btn-danger"><i class="zmdi zmdi-cloud"></i> Button</a>

Buttons Group

Pagination Examples

1 2 3 4
5 6 7 8


<h2 class="section-title">Buttons Group</h2>

<div class="btn-group btn-group-justified btn-group-raised">
    <a href="#" class="btn ">Left</a>
    <a href="#" class="btn ">Middle</a>
    <a href="#" class="btn ">Right</a>
</div>

<h3>Multiple Colors</h3>
<div class="btn-group btn-group-justified btn-group-raised">
    <a href="#" class="btn btn-info">Left</a>
    <a href="#" class="btn btn-success">Middle</a>
    <a href="#" class="btn btn-danger">Right</a>
</div>

<div class="btn-group btn-group-justified btn-group-raised">
    <a href="#" class="btn btn-warning">Left</a>
    <a href="#" class="btn btn-warning">Middle</a>
    <a href="#" class="btn btn-royal">Right</a>
</div>

<div class="btn-group btn-group-justified btn-group-raised">
    <a href="#" class="btn btn-primary">Left</a>
    <a href="#" class="btn btn-primary">Middle</a>
    <a href="#" class="btn btn-primary">Right</a>
</div>

<h3 class="no-mb">Without Justifying</h3>

<div class="btn-group btn-group-raised">
    <a href="#" class="btn">Left</a>
    <a href="#" class="btn">Middle</a>
    <a href="#" class="btn">Right</a>
</div>

<div class="btn-group btn-group-raised">
    <a href="#" class="btn btn-primary"><i class="zmdi zmdi-favorite-outline"></i></a>
    <a href="#" class="btn btn-primary"><i class="zmdi zmdi-flower"></i></a>
    <a href="#" class="btn btn-primary"><i class="zmdi zmdi-star"></i></a>
</div>

Buttons with Dropdowns






<div class="btn-group">
    <button type="button" class="btn btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Button <i class="zmdi zmdi-chevron-down right"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-primary">
        <li class="dropdown-header">Button</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Material Style

Social Links