diff --git a/demo-shell-ng2/app/components/datatable/datatable-demo.component.html b/demo-shell-ng2/app/components/datatable/datatable-demo.component.html
index 2f90bb4f18..795c40adb2 100644
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.html
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.html
@@ -9,22 +9,22 @@
 </div>
 <div class="p-10">
     <button
-            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
             (click)="reset()">
         Reset to default
     </button>
     <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
         (click)="addRow()">
         Add row
     </button>
     <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
         (click)="replaceRows()">
         Replace rows
     </button>
     <button
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
+        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
         (click)="replaceColumns()">
         Replace columns
     </button>