<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>

<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>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-default 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">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Single button -->
<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 class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-info 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-info">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-danger 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-danger">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-warning 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-warning">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-success 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-success">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-royal 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-royal">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-dark 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-dark">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<hr>

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-default btn-raised">Button</button>
    <button type="button" class="btn btn-default btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-primary btn-raised">Button</button>
    <button type="button" class="btn btn-primary btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-primary">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-info btn-raised">Button</button>
    <button type="button" class="btn btn-info btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-info">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-danger btn-raised">Button</button>
    <button type="button" class="btn btn-danger btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-danger">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-warning btn-raised">Button</button>
    <button type="button" class="btn btn-warning btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-warning">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-success btn-raised">Button</button>
    <button type="button" class="btn btn-success btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-success">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-royal btn-raised">Button</button>
    <button type="button" class="btn btn-royal btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-royal">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Split button -->
<div class="btn-group">
    <button type="button" class="btn btn-dark btn-raised">Button</button>
    <button type="button" class="btn btn-dark btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-dark">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>