Scroll to Top

Flat Button

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

SITEMAP Documentation / Css / Buttons / Flat Button

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>

Feedback

Developed By Egrammi Studios