Scroll to Top

Buttons

use button classes in <button> , <a> or <input> tags. Just add 'btn' class to style your buttons and for colors there are other classes. There is many more in this section.

SITEMAP Documentation / Css / Buttons

Default Buttons are not styled much but you can style them by materialgrammi pre-defined css.

Demo

anchor

Code copy

<a href="#">anchor</a>
<button href="#">button</button>

Shadowed buttons are standard buttons of materialgrammi.

Demo

Code copy

<a href="#" class='btn'>anchor</a>

There are seven types of button colors which are introduced in materialgrammi that can be used for different purposes.

Demo

btn btn-default

default

btn btn-primary

primary

btn btn-success

success

btn btn-warning

warning

btn btn-danger

danger

btn btn-info

info

btn btn-secondary

secondary

Code copy

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

Button block takes whole width of the parent division.

Demo

btn btn-block

Block

Code copy

<a href="#" class="btn btn-default btn-block">Block</a>

Different styles of outline buttons are very innovative and mostly used by users.

Demo

btn btn-outline-default

default

btn btn-outline-primary

primary

btn btn-outline-success

success

btn btn-outline-warning

warning

btn btn-outline-danger

danger

btn btn-outline-info

info

btn btn-outline-secondary

secondary

Code copy

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

Flat Buttons are just like text but when hover over they change there colors.

Code copy

<a href="#" class="btn btn-flat">Flat button</a>

These button acts like simple links but when hover over, it will take the hover class of the button color.

Demo

Please hover on the buttons to test the demo.

Code copy

<a href="#" class="btn btn-flat-transparent btn-default">Default</a>
<a href="#" class="btn btn-flat-transparent btn-primary">Primary</a>
<a href="#" class="btn btn-flat-transparent btn-success">Success</a>
<a href="#" class="btn btn-flat-transparent btn-warning">Warning</a>
<a href="#" class="btn btn-flat-transparent btn-info">Info</a>
<a href="#" class="btn btn-flat-transparent btn-danger">Danger</a>
<a href="#" class="btn btn-flat-transparent btn-secondary">Secondary</a>
<a href="#" class="btn btn-flat-transparent btn-dark">Dark</a>
<a href="#" class="btn btn-flat-transparent btn-light">Light</a>

These buttons does not have additional box-shadows and have more decent looks.

Code copy

<a href="#" class="btn btn-flat btn-default">Default</a>
<a href="#" class="btn btn-flat btn-primary">Primary</a>
<a href="#" class="btn btn-flat btn-success">Success</a>
<a href="#" class="btn btn-flat btn-warning">Warning</a>
<a href="#" class="btn btn-flat btn-info">Info</a>
<a href="#" class="btn btn-flat btn-danger">Danger</a>
<a href="#" class="btn btn-flat btn-secondary">Secondary</a>
<a href="#" class="btn btn-flat btn-dark">Dark</a>
<a href="#" class="btn btn-flat btn-light">Light</a>

Add Badges to your buttons. Keep the flow of design with the button classes, i.e btn-success and badge will automatically adjust its color with the button.

Demo

just add <span class="badge">[your badge]</span> inside any btn class with btn-[color] class and badge will adjust its color with button.

Deafult 1 Primary 1 success 1 warning 1 info 1 danger 1 secondary 1 Dark 1 light 1

Code copy

<a href="#" class="btn btn-flat btn-default">Deafult <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-primary">Primary <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-success">success <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-warning">warning <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-info">info <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-danger">danger <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-secondary">secondary <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-dark">Dark <span class="badge">1</span></a>
<a href="#" class="btn btn-flat btn-light">light <span class="badge">1</span></a>

Feedback