doc(button-content): Update and rearrange content for readability

Author: ajoygphilip

pug/page-contents/buttons_content.html

@@ -4,9 +4,10 @@
     <div class="col s12 m8 offset-m1 xl7 offset-xl1">
       <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.
+          There are 3 main button types described in material design - the raised button, the floating, and the flat button button. 
         </p>
         <h3 class="header">Raised</h3>
+        <p>The raised button is a standard button that signify actions and seek to give depth to a mostly flat page.</p> 
         <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>
@@ -22,6 +23,7 @@ <h3 class="header">Raised</h3>
       </div>
       <div id="floating" class="section scrollspy">
         <h3 class="header">Floating</h3>
+        <p>The floating button is meant for very important functions.</p>
         <a class="btn-floating waves-effect waves-light btn-large red"><i class="material-icons">add</i></a><br><br>
         <pre style="padding-top: 0px;">
           <span class="copyMessage">Copied!</span>
@@ -33,10 +35,11 @@ <h3 class="header">Floating</h3>
         <br>
 
         <h5>Floating Action Button</h5>
-        <p>See the documentation on <a href="floating-action-button.html">this page</a></p>
+        <p>A circular material button that lifts and displays an ink reaction on press. See the documentation on <a href="floating-action-button.html">this page</a></p>
       </div>
       <div id="flat" class="section scrollspy">
         <h3 class="header">Flat</h3>
+        
         <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 style="padding-top: 0px;">