diff --git a/docs/_pages/components.md b/docs/_pages/components.md
index 83867964..29825c72 100644
--- a/docs/_pages/components.md
+++ b/docs/_pages/components.md
@@ -50,6 +50,11 @@ categories:
               file: flat-ripple.html
             - caption: Disabled
               file: flat-disabled.html
+          - snippet_group:
+            - caption: Primary colored flat
+              file: flat-primary.html
+            - caption: Accent colored flat
+              file: flat-accent.html
   - name: cards
     title: Cards
     description: Self-contained pieces of paper with data.
diff --git a/src/button/_button.scss b/src/button/_button.scss
index 5a539168..380b8c5a 100644
--- a/src/button/_button.scss
+++ b/src/button/_button.scss
@@ -256,17 +256,23 @@
 // Colorized buttons
 
 .mdl-button--primary.mdl-button--primary {
-  background-color: $button-primary-color-alt;
-  color: $button-secondary-color-alt;
+  color: $button-primary-color-alt;
   & .mdl-ripple {
     background: $button-secondary-color-alt;
   }
+  &.mdl-button--raised {
+    color: $button-secondary-color-alt;
+    background-color: $button-primary-color-alt;
+  }
 }
 
 .mdl-button--accent.mdl-button--accent {
-  background-color: $button-fab-color-alt;
-  color: $button-fab-text-color-alt;
+  color: $button-fab-color-alt;
   & .mdl-ripple {
     background: $button-fab-text-color-alt;
   }
+  &.mdl-button--raised {
+    color: $button-fab-text-color-alt;
+    background-color: $button-fab-color-alt;
+  }
 }
diff --git a/src/button/snippets/flat-accent.html b/src/button/snippets/flat-accent.html
new file mode 100644
index 00000000..b650bc2f
--- /dev/null
+++ b/src/button/snippets/flat-accent.html
@@ -0,0 +1,4 @@
+<!-- Accent-colored flat button -->
+<button class="mdl-button mdl-js-button mdl-button--accent">
+  Button
+</button>
diff --git a/src/button/snippets/flat-primary.html b/src/button/snippets/flat-primary.html
new file mode 100644
index 00000000..780ce489
--- /dev/null
+++ b/src/button/snippets/flat-primary.html
@@ -0,0 +1,4 @@
+<!-- Primary-colored flat button -->
+<button class="mdl-button mdl-js-button mdl-button--primary">
+  Button
+</button>