docs(demos): add a variety of button demos (#5628)

Author: amcdnl

src/material-examples/button-types/button-types-example.css

@@ -1,7 +1,3 @@
-.example-container {
-  width: 500px;
-}
-
 .example-button-row {
   display: flex;
   align-items: center;

src/material-examples/button-types/button-types-example.html

@@ -1,17 +1,64 @@
-<div class="example-container">
-  <h3>Normal Buttons</h3>
-  <div class="button-row">
-    <button md-button>Flat button</button>
-    <button md-raised-button>Raised button</button>
-    <button md-fab><md-icon>check</md-icon></button>
-    <button md-mini-fab><md-icon>check</md-icon></button>
-  </div>
+<h3>Basic Buttons</h3>
+<div class="button-row">
+  <button md-button>Basic</button>
+  <button md-button color="primary">Primary</button>
+  <button md-button color="accent">Accent</button>
+  <button md-button color="warn">Warn</button>
+  <button md-button disabled>Disabled</button>
+  <a md-button routerLink=".">Link</a>
+</div>
+
+<h3>Raised Buttons</h3>
+<div class="button-row">
+  <button md-raised-button>Basic</button>
+  <button md-raised-button color="primary">Primary</button>
+  <button md-raised-button color="accent">Accent</button>
+  <button md-raised-button color="warn">Warn</button>
+  <button md-raised-button disabled>Disabled</button>
+  <a md-raised-button routerLink=".">Link</a>
+</div>
+
+<h3>Icon Buttons</h3>
+<div class="button-row">
+  <button md-icon-button>
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <button md-icon-button color="primary">
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <button md-icon-button color="accent">
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <button md-icon-button color="warn">
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <button md-icon-button disabled>
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+</div>
+
+<h3>Fab Buttons</h3>
+<div class="button-row">
+  <button md-fab>Basic</button>
+  <button md-fab color="primary">Primary</button>
+  <button md-fab color="accent">Accent</button>
+  <button md-fab color="warn">Warn</button>
+  <button md-fab disabled>Disabled</button>
+  <button md-fab>
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <a md-fab routerLink=".">Link</a>
+</div>
 
-  <h3>Link Buttons</h3>
-  <div class="example-button-row">
-    <a md-button routerLink=".">Flat button</a>
-    <a md-raised-button routerLink=".">Raised button</a>
-    <a md-fab routerLink="."><md-icon>check</md-icon></a>
-    <a md-mini-fab routerLink="."><md-icon>check</md-icon></a>
-  </div>
+<h3>Mini Fab Buttons</h3>
+<div class="button-row">
+  <button md-mini-fab>Basic</button>
+  <button md-mini-fab color="primary">Primary</button>
+  <button md-mini-fab color="accent">Accent</button>
+  <button md-mini-fab color="warn">Warn</button>
+  <button md-mini-fab disabled>Disabled</button>
+  <button md-mini-fab>
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <a md-mini-fab routerLink=".">Link</a>
 </div>