@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-buttons", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Buttons", "crumbs": "
  • Dashboard
  • UI
  • Buttons
    • " })
    There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.

    Raised

    .btn
    button button button 
    <a class="btn">Stuff</a>
<a class="btn"><i class="mdi-file-cloud left"></i>button</a>
<a class="btn"><i class="mdi-file-cloud right"></i>button</a>

    Floating

    <a class="btn-floating btn-large red"><i class="mdi-content-add"></i></a>

    Fixed Action Button

    If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page. 
    <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large red">
    <i class="large mdi-editor-mode-edit"></i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
    <li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
    <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
  </ul>
</div>

    Flat

    .btn-flat
    Button 
    <a class="waves-effect waves-blue btn-flat">Button</a>

    Submit Button

    When you use a button to submit a form, instead of using a input tag, use a button tag with a type submit

    <button class="btn" type="submit" name="action">
  Submit <i class="mdi-content-send right"></i>
</button>

    Different sizes

    .btn-extra
    Button button button
    .btn-large
    Button button button
    .btn
    Button button button
    .btn-small
    Button button button 
    <a class="btn btn-extra">Extra</a>
<a class="btn btn-large">Large</a>
<a class="btn">Medium</a>
<a class="btn btn-small">Small</a>
    .btn-extra

    .btn-large

    .btn-floating

    .btn-small
    <a class="btn-floating btn-extra red"><i class="mdi-content-add"></i></a>
<a class="btn-floating btn-large red"><i class="mdi-content-add"></i></a>
<a class="btn-floating red"><i class="mdi-content-add"></i></a>
<a class="btn-floating btn-small red"><i class="mdi-content-add"></i></a>

    Rounded

    All buttons except floating can be rounded. Use .btn-rounded classname

    Extra Large Medium Small 
    <a class="btn btn-extra btn-rounded">Extra</a>
<a class="btn btn-large btn-rounded">Large</a>
<a class="btn btn-rounded">Medium</a>
<a class="btn btn-small btn-rounded">Small</a>

    Groups

    Multiple .btn's can be wrapped in .btn-group

    Extra Extra Extra Extra


    Small Small Small Small Small 
    <div class="btn-group">
  <a class="btn btn-extra">Extra</a>
  <a class="btn btn-extra">Extra</a>
  <a class="btn btn-extra">Extra</a>
</div>

<div class="btn-group">
  <a class="btn btn-small btn-rounded">Small</a>
  <a class="btn btn-small">Small</a>
  <a class="btn btn-small btn-rounded">Small</a>
</div>

    Disabled

    This style can be applied to all button types

    Extra Extra
    Button Button Button 
    <div class="btn-group">
  <a class="btn btn-extra disabled">Extra</a>
  <a class="btn btn-extra disabled">Extra</a>
</div>
<a class="btn-extra btn-rounded disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled"><i class="mdi-content-add"></i></a>

    Color Variations

    Full color list you can find in this section.

    red pink purple deep-purple indigo blue light-blue cyan teal green light-green lime yellow amber orange deep-orange brown grey blue-grey
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })