materialize-css

<div class="container"> <div class="row"> <div class="col s12 m9 l10"> <div id="raised" class="section scrollspy"> <p class="caption"> 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. </p> <h2 class="header">Raised</h2> <a class="waves-effect waves-light btn">button</a> <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a> <pre><code class="language-markup col s12"> <a class="waves-effect waves-light btn">button</a> <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a> </code></pre> </div> <div id="floating" class="section scrollspy"> <h2 class="header">Floating</h2> <a class="btn-floating waves-effect waves-light btn-large red"><i class="material-icons">add</i></a><br><br> <pre><code class="language-markup col s12"> <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></i></a> </code></pre> <br> <h4 class="light">Fixed Action Button</h4> <p>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.</p> <pre><code class="language-markup col s12"> <div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large red"> <i class="large material-icons">mode_edit</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </code></pre> <p>You can also open the Fixed Action Button Menu programatically, the below code will make your FAB Menu open:</p> <pre><code class="language-javascript"> $('.fixed-action-btn').openFAB(); </code></pre> <p>You can also close them programatically:</p> <pre><code class="language-javascript"> $('.fixed-action-btn').closeFAB(); </code></pre> <br> <h4 class="light">Horizontal FAB</h4> <p>Creating a horizontal FAB is easy! Just add the class <code class="language-markup">horizontal</code> to the FAB.</p> <div style="position: relative;"> <div class="fixed-action-btn horizontal" style="position: absolute; display: inline-block; right: 24px;"> <a class="btn-floating btn-large red"> <i class="large material-icons">mode_edit</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </div> <pre><code class="language-markup col s12"> <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large red"> <i class="large material-icons">mode_edit</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </code></pre> <div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large red"> <i class="material-icons">mode_edit</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> <br> <h4 class="light">Click-only FAB</h4> <p>If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), just add the <code class="language-markup">click-to-toggle</code> class to the FAB.</p> <div style="position: relative; height: 70px;"> <div class="fixed-action-btn horizontal click-to-toggle" style="position: absolute; right: 24px;"> <a class="btn-floating btn-large red"> <i class="material-icons">menu</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </div> <pre><code class="language-markup col s12"> <div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large red"> <i class="material-icons">menu</i> </a> <ul> <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li> <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li> <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li> <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li> </ul> </div> </code></pre> </div> <div id="flat" class="section scrollspy"> <h2 class="header">Flat</h2> <p>Flat buttons are used to reduce excessive layering. For example, flat buttons are usually used for actions within a card or modal so there aren't too many overlapping shadows.</p> <a class="waves-effect waves-teal btn-flat">Button</a> <pre><code class="language-markup col s12"> <a class="waves-effect waves-teal btn-flat">Button</a> </code></pre> </div> <div id="submit" class="section scrollspy"> <h2 class="header">Submit Button</h2> <p>When you use a button to submit a form, instead of using a input tag, use a button tag with a type submit</p> <button class="btn waves-effect waves-light" type="submit" name="action">Submit<i class="material-icons right">send</i></button> <pre><code class="language-markup"> <button class="btn waves-effect waves-light" type="submit" name="action">Submit <i class="material-icons right">send</i></i> </button> </code></pre> </div> <div id="large" class="section scrollspy"> <h2 class="header">Large</h2> <p>This button has a larger height for buttons that need more attention.</p> <a class="waves-effect waves-light btn-large">Button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a> <pre><code class="language-markup col s12"> <a class="waves-effect waves-light btn-large">Button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a> </code></pre> </div> <div id="disabled" class="section scrollspy"> <h2 class="header">Disabled</h2> <p>This style can be applied to all button types</p> <a class="btn-large disabled">Button</a> <a class="btn disabled">Button</a> <a class="btn-flat disabled">Button</a> <a class="btn-floating disabled"><i class="material-icons">add</i></a> <pre><code class="language-markup col s12"> <a class="btn-large disabled">Button</a> <a class="btn disabled">Button</a> <a class="btn-flat disabled">Button</a> <a class="btn-floating disabled"><i class="material-icons">add</i></a> </code></pre> </div> </div> <div class="col hide-on-small-only m3 l2"> <div class="toc-wrapper"> <div class="buysellads hide-on-small-only">  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script> </div> <div style="height: 1px;"> <ul class="section table-of-contents"> <li><a href="#raised">Raised</a></li> <li><a href="#floating">Floating</a></li> <li><a href="#flat">Flat</a></li> <li><a href="#submit">Submit</a></li> <li><a href="#large">Large</a></li> <li><a href="#disabled">Disabled</a></li> </ul> </div> </div> </div> </div> </div>