diff --git a/src/button/_button.scss b/src/button/_button.scss
index e60305c7..54f78153 100644
--- a/src/button/_button.scss
+++ b/src/button/_button.scss
@@ -252,3 +252,21 @@
       background-color: transparent;
     }
   }
+
+// Colorized buttons
+
+.mdl-button--primary.mdl-button--primary {
+  background-color: $button-primary-color-alt;
+  color: $button-secondary-color-alt;
+  & .mdl-ripple {
+    background: $button-secondary-color-alt;
+  }
+}
+
+.mdl-button--accent.mdl-button--accent {
+  background-color: $button-fab-color-alt;
+  color: $button-fab-text-color-alt;
+  & .mdl-ripple {
+    background: $button-fab-text-color-alt;
+  }
+}
diff --git a/src/button/demo.html b/src/button/demo.html
index e790ca65..752ed18b 100644
--- a/src/button/demo.html
+++ b/src/button/demo.html
@@ -39,6 +39,20 @@
     <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Raised</button></div>
     <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>
 
+    <h2>.mdl-button--primary</h2>
+
+    <div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary">Flat</button></div>
+    <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Raised</button></div>
+    <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--primary"><span class="mdl-icon mdl-icon--add"/></button></div>
+    <div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--primary"><span class="mdl-icon mdl-icon--add"/></button></div>
+
+    <h2>.mdl-button--accent</h2>
+
+    <div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">Flat</button></div>
+    <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Raised</button></div>
+    <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent"><span class="mdl-icon mdl-icon--add"/></button></div>
+    <div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--accent"><span class="mdl-icon mdl-icon--add"/></button></div>
+
     <h2>.mdl-button--mini-fab</h2>
 
     <div class="demo-button"><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--mini-fab mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>