Material Style

Components Menu

Buttons Components

Buttons with icons

Font Awesome Icons

Button Button
Button Button
Button Button
Button Button
Button Button

Material Design Iconic Font

Button Button
Button Button
Button Button
Button Button
Button Button 

<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

Left Middle Right

Multiple Colors

Left Middle Right
Left Middle Right
Left Middle Right

Without Justifying

Left Middle Right

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




<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-default dropdown-toggle" data-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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>

MaterialStyle

Social Links

12
 4