Buttons


<a href="#" class="btn btn-default">Button</a>
<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-info">Button</a>
<a href="#" class="btn btn-success">Button</a>
<a href="#" class="btn btn-warning">Button</a>
<a href="#" class="btn btn-danger">Button</a>
<a href="#" class="btn btn-royal">Button</a>

<a href="#" class="btn btn-raised btn-default">Button</a>
<a href="#" class="btn btn-raised btn-primary">Button</a>
<a href="#" class="btn btn-raised btn-info">Button</a>
<a href="#" class="btn btn-raised btn-success">Button</a>
<a href="#" class="btn btn-raised btn-warning">Button</a>
<a href="#" class="btn btn-raised btn-danger">Button</a>
<a href="#" class="btn btn-raised btn-royal">Button</a>

Block Buttons


Full Width Example

Button Button
<a href="#" class="btn btn-block btn-primary">Button</a>
<a href="#" class="btn btn-block btn-raised btn-primary">Button</a>

Inverse Buttons

White Buttons

Button Button

Other Colors

Button Button Button Button Button Button

Raised Buttons

Button Button Button Button Button Button

<a href="#" class="btn btn-white">Button</a>
<a href="#" class="btn btn-raised color-primary btn-white">Button</a>

<a href="#" class="btn btn-raised btn-white">Button</a>
<a href="#" class="btn btn-raised color-info btn-white">Button</a>
<a href="#" class="btn btn-raised color-success btn-white">Button</a>
<a href="#" class="btn btn-raised color-warning btn-white">Button</a>
<a href="#" class="btn btn-raised color-danger btn-white">Button</a>
<a href="#" class="btn btn-raised color-royal btn-white">Button</a>

<a href="#" class="btn btn-raised btn-default">Button</a>
<a href="#" class="btn btn-raised btn-info">Button</a>
<a href="#" class="btn btn-raised btn-success">Button</a>
<a href="#" class="btn btn-raised btn-warning">Button</a>
<a href="#" class="btn btn-raised btn-danger">Button</a>
<a href="#" class="btn btn-raised btn-royal">Button</a>

Size Buttons

Basic Buttons

Button
Button
Button
Button
Button

Raised Buttons

Button
Button
Button
Button
Button

Block Buttons Example

Button Button Button Button
<a href="#" class="btn btn-xs btn-default">Button</a>
<a href="#" class="btn btn-sm btn-default">Button</a>
<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-lg btn-info">Button</a>
<a href="#" class="btn btn-xlg btn-info">Button</a>

Circle Buttons

Normal Buttons

Font Awesome Icons


Material Design Iconic Font

Raised Buttons

Font Awesome Icons


Material Design Iconic Font

Inverse Circle Buttons

White Buttons

Other Colors

Raised Buttons


<h2 class="section-title">Inverse Circle Buttons</h2>
<h3>White Buttons</h3>
<a href="#" class="btn-circle btn-circle-white"><i class="fa fa-search"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-white btn-circle-primary"><i class="fa fa-search"></i></a>
<h3>Other Colors</h3>
<a href="#" class="btn-circle btn-circle-raised btn-circle-white btn-circle-default"><i class="zmdi zmdi-search"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-white btn-circle-info"><i class="zmdi zmdi-phone"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-white btn-circle-success"><i class="zmdi zmdi-mail-send"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-white btn-circle-warning"><i class="zmdi zmdi-favorite"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-white btn-circle-danger"><i class="zmdi zmdi-globe"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-white btn-circle-royal"><i class="zmdi zmdi-star"></i></a>
<h3>Raised Buttons</h3>
<a href="#" class="btn-circle btn-circle-raised btn-circle-default"><i class="zmdi zmdi-search"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-info"><i class="zmdi zmdi-phone"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-success"><i class="zmdi zmdi-mail-send"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-warning"><i class="zmdi zmdi-favorite"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-danger"><i class="zmdi zmdi-globe"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-royal"><i class="zmdi zmdi-star"></i></a>

Size Circle Buttons

Normal Buttons

Font Awesome Icons


Material Design Iconic Font

Raised Buttons

Font Awesome Icons


Material Design Iconic Font


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

<h3>Normal Buttons</h3>

<h4>Font Awesome Icons</h4>
<a href="#" class="btn-circle btn-circle-default"><i class="fa fa-search"></i></a>
<a href="#" class="btn-circle btn-circle-primary"><i class="fa fa-download"></i></a>
<a href="#" class="btn-circle btn-circle-info"><i class="fa fa-phone"></i></a>
<a href="#" class="btn-circle btn-circle-success"><i class="fa fa-send"></i></a>
<a href="#" class="btn-circle btn-circle-warning"><i class="fa fa-heart"></i></a>
<a href="#" class="btn-circle btn-circle-danger"><i class="fa fa-globe"></i></a>
<a href="#" class="btn-circle btn-circle-royal"><i class="fa fa-star"></i></a>

<h4>Material Design Iconic Font</h4>
<a href="#" class="btn-circle btn-circle-default"><i class="zmdi zmdi-search"></i></a>
<a href="#" class="btn-circle btn-circle-primary"><i class="zmdi zmdi-download"></i></a>
<a href="#" class="btn-circle btn-circle-info"><i class="zmdi zmdi-phone"></i></a>
<a href="#" class="btn-circle btn-circle-success"><i class="zmdi zmdi-mail-send"></i></a>
<a href="#" class="btn-circle btn-circle-warning"><i class="zmdi zmdi-favorite"></i></a>
<a href="#" class="btn-circle btn-circle-danger"><i class="zmdi zmdi-globe"></i></a>
<a href="#" class="btn-circle btn-circle-royal"><i class="zmdi zmdi-star"></i></a>

<h3>Raised Buttons</h3>

<h4>Font Awesome Icons</h4>
<a href="#" class="btn-circle btn-circle-raised btn-circle-default"><i class="fa fa-search"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-primary"><i class="fa fa-download"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-info"><i class="fa fa-phone"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-success"><i class="fa fa-send"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-warning"><i class="fa fa-heart"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-danger"><i class="fa fa-globe"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-royal"><i class="fa fa-star"></i></a>

<h4>Material Design Iconic Font</h4>
<a href="#" class="btn-circle btn-circle-raised btn-circle-default"><i class="zmdi zmdi-search"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-primary"><i class="zmdi zmdi-download"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-info"><i class="zmdi zmdi-phone"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-success"><i class="zmdi zmdi-mail-send"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-warning"><i class="zmdi zmdi-favorite"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-danger"><i class="zmdi zmdi-globe"></i></a>
<a href="#" class="btn-circle btn-circle-raised btn-circle-royal"><i class="zmdi zmdi-star"></i></a>

MaterialStyle

Social Links