diff --git a/ionic/components/button/test/basic/main.html b/ionic/components/button/test/basic/main.html
index 74d078849e..28341090bb 100644
--- a/ionic/components/button/test/basic/main.html
+++ b/ionic/components/button/test/basic/main.html
@@ -11,28 +11,28 @@
   </p>
 
   <p>
-    <button class="button-primary">Primary</button>
-    <button class="button-primary activated">Primary.activated</button>
+    <button primary>Primary</button>
+    <button primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button class="button-secondary">Secondary</button>
-    <button class="button-secondary activated">Secondary.activated</button>
+    <button secondary>Secondary</button>
+    <button secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button class="button-danger">Danger</button>
-    <button class="button-danger activated">Danger.activated</button>
+    <button danger>Danger</button>
+    <button danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button class="button-light">Light</button>
-    <button class="button-light activated">Light.activated</button>
+    <button light>Light</button>
+    <button light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button class="button-dark">Dark</button>
-    <button class="button-dark activated">Dark.activated</button>
+    <button dark>Dark</button>
+    <button dark class="activated">Dark.activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index 7cca21f370..b99513a59d 100644
--- a/ionic/components/button/test/block/main.html
+++ b/ionic/components/button/test/block/main.html
@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <a button class="button-block" href="#">a block</a>
-    <button class="button-block">block</button>
+    <a button block href="#">a[button][block]</a>
+    <button block>button[block]</button>
   </p>
 
   <p>
-    <a button class="button-block" href="#"><icon help-circle></icon> a block icon</a>
-    <button class="button-block"><icon help-circle></icon> block icon</button>
+    <a button block href="#"><icon help-circle></icon> a[button][block] icon</a>
+    <button block><icon help-circle></icon> button[block] icon</button>
   </p>
 
   <p>
-    <a button class="button-block button-outline-secondary" href="#">a block outline secondary</a>
-    <button class="button-block button-outline-secondary">button block outline secondary</button>
+    <a button block outline secondary href="#">a[button][block][outline][secondary]</a>
+    <button block outline secondary>button[block][outline][secondary]</button>
   </p>
 
   <p>
-    <a button class="button-block button-clear-dark" href="#">a block clear dark</a>
-    <button class="button-block button-clear-dark">button block clear dark</button>
+    <a button block clear dark href="#">a[button][block][clear][dark]</a>
+    <button block clear dark>button[clear][block][dark]</button>
   </p>
 
   <p>
-    <a button class="button-block button-round" href="#">a block round</a>
-    <button class="button-block button-round">button block ound</button>
+    <a button block round href="#">a[button][block][round]</a>
+    <button block round>button[block][round]</button>
   </p>
 
   <p>
-    <a button class="button-block button-round button-outline" href="#">a block round outline</a>
-    <button class="button-block button-round button-outline">button block round outline</button>
+    <a button block round outline href="#">a[button][block][round][outline]</a>
+    <button block round outline>button[block][round][outline]</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/clear/main.html b/ionic/components/button/test/clear/main.html
index 2b3181ed21..eaf85b301a 100644
--- a/ionic/components/button/test/clear/main.html
+++ b/ionic/components/button/test/clear/main.html
@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <button class="button-clear">Default</button>
-    <button class="button-clear activated">Default.activated</button>
+    <button clear>Default</button>
+    <button clear class="activated">Default.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-primary">Primary</button>
-    <button class="button-clear-primary activated">Primary.activated</button>
+    <button clear primary>Primary</button>
+    <button clear primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-secondary">Secondary</button>
-    <button class="button-clear-secondary activated">Secondary.activated</button>
+    <button clear secondary>Secondary</button>
+    <button clear secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-danger">Danger</button>
-    <button class="button-clear-danger activated">Danger.activated</button>
+    <button clear danger>Danger</button>
+    <button clear danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-light">Light</button>
-    <button class="button-clear-light activated">Light.activated</button>
+    <button clear light>Light</button>
+    <button clear light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-dark">Dark</button>
-    <button class="button-clear-dark activated">Dark.activated</button>
+    <button clear dark>Dark</button>
+    <button clear dark class="activated">Dark.activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/fab/main.html b/ionic/components/button/test/fab/main.html
index 6753bf3364..d081de4cd5 100644
--- a/ionic/components/button/test/fab/main.html
+++ b/ionic/components/button/test/fab/main.html
@@ -1,24 +1,24 @@
 
-<button class="button-fab button-fab-left button-fab-top">
+<button fab fab-left fab-top>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-center button-fab-top button-secondary">
+<button fab fab-center fab-top secondary>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-right button-fab-top button-danger">
+<button fab fab-right fab-top danger>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-left button-fab-bottom button-light">
+<button fab fab-left fab-bottom light>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-center button-fab-bottom button-primary">
+<button fab fab-center fab-bottom primary>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-right button-fab-bottom button-dark">
+<button fab fab-right fab-bottom dark>
   <icon add></icon>
 </button>
diff --git a/ionic/components/button/test/full/main.html b/ionic/components/button/test/full/main.html
index 30c2e902d4..15590211b5 100644
--- a/ionic/components/button/test/full/main.html
+++ b/ionic/components/button/test/full/main.html
@@ -6,23 +6,23 @@
 <ion-content>
 
   <div>
-    <a button class="button-full" href="#">a[button].button-full</a>
-    <button class="button-full">button.button-full</button>
+    <a button full href="#">a[button][full]</a>
+    <button full>button[full]</button>
   </div>
 
   <div>
-    <a button class="button-full button-outline-secondary" href="#">a[button].button-full.button-outline-secondary</a>
-    <button class="button-full button-outline-secondary">button.button-full.button-outline-secondary</button>
+    <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
+    <button full outline secondary>button[full][outline][secondary]</button>
   </div>
 
   <div>
-    <a button class="button-full button-clear-light" href="#">a[button].button-full.button-clear-light</a>
-    <button class="button-full button-clear-light">button.button-full.button-clear-light</button>
+    <a button full clear light href="#">a[button][full][clear][light]</a>
+    <button full clear light>button[full][clear][light]</button>
   </div>
 
   <div>
-    <a button class="button-full button-clear-dark" href="#">a[button].button-full.button-clear-dark</a>
-    <button class="button-full button-clear-dark">button.button-full.button-clear-dark</button>
+    <a button full clear dark href="#">a[button][full][clear][dark]</a>
+    <button full clear dark>button[full][clear][dark]</button>
   </div>
 
 </ion-content>
diff --git a/ionic/components/button/test/outline/main.html b/ionic/components/button/test/outline/main.html
index b2c5d69247..04b4037645 100644
--- a/ionic/components/button/test/outline/main.html
+++ b/ionic/components/button/test/outline/main.html
@@ -6,49 +6,49 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <button class="button-outline">Default</button>
-    <button class="button-outline activated">Default.activated</button>
+    <button outline>Default</button>
+    <button outline class="activated">Default.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-primary">Primary</button>
-    <button class="button-outline-primary activated">Primary.activated</button>
+    <button outline primary>Primary</button>
+    <button outline primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-secondary">Secondary</button>
-    <button class="button-outline-secondary activated">Secondary.activated</button>
+    <button outline secondary>Secondary</button>
+    <button outline secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-danger">Danger</button>
-    <button class="button-outline-danger activated">Danger.activated</button>
+    <button outline danger>Danger</button>
+    <button outline danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-light">Light</button>
-    <button class="button-outline-light activated">Light.activated</button>
+    <button outline light>Light</button>
+    <button outline light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-dark">Dark</button>
-    <button class="button-outline-dark activated">Dark.activated</button>
+    <button outline dark>Dark</button>
+    <button outline dark class="activated">Dark.activated</button>
   </p>
 
   <p>
-    <button class="button-outline button-block">.button-outline.button-block</button>
+    <button outline block>button[outline][block]</button>
   </p>
 
   <p>
-    <button class="button-outline button-block activated">.button-outline.button-block.activated</button>
+    <button outline block class="activated">[outline][block].activated</button>
   </p>
 
   <p>
-    <button class="button-outline-secondary button-block" >.button-outline-secondary.button-block</button>
+    <button outline block secondary>button[outline][block][secondary]</button>
   </p>
 
   <p>
-    <button class="button-outline-secondary button-block activated">.button-outline-secondary.button-block.activated</button>
+    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/round/main.html b/ionic/components/button/test/round/main.html
index c163f7cdac..f90d2f7b70 100644
--- a/ionic/components/button/test/round/main.html
+++ b/ionic/components/button/test/round/main.html
@@ -4,17 +4,17 @@
 </ion-toolbar>
 
 <ion-content padding>
-  <button class="button-round">button</button>
-  <button class="button-round button-light">button light</button>
-  <button class="button-round button-secondary">button secondary</button>
-  <button class="button-round button-danger">button danger</button>
-  <button class="button-round button-dark">button dark</button>
+  <button round>button</button>
+  <button round light>button light</button>
+  <button round secondary>button secondary</button>
+  <button round danger>button danger</button>
+  <button round dark>button dark</button>
 
-  <button class="button-round button-outline">button</button>
-  <button class="button-round button-outline-light">button outline light</button>
-  <button class="button-round button-outline-secondary">button outline secondary</button>
-  <button class="button-round button-outline-danger">button outline danger</button>
-  <button class="button-round button-outline-dark">button outline dark</button>
+  <button round outline>button</button>
+  <button round light outline>button light</button>
+  <button round secondary outline>button secondary</button>
+  <button round danger outline>button danger</button>
+  <button round dark outline>button dark</button>
 
 </ion-content>
 
diff --git a/ionic/components/button/test/sizes/main.html b/ionic/components/button/test/sizes/main.html
index 5f9fff318d..0db997df5a 100644
--- a/ionic/components/button/test/sizes/main.html
+++ b/ionic/components/button/test/sizes/main.html
@@ -11,23 +11,23 @@
   </p>
 
   <p>
-    <a button class="button-small" href="#">a[button].button-small</a>
-    <button class="button-small">button.button-small</button>
+    <a button small href="#">a[button][small]</a>
+    <button small>button[small]</button>
   </p>
 
   <p>
-    <a button class="button-outline button-small" href="#">a[button].button-outline.button-small</a>
-    <button class="button-outline button-small">button.button-outline.button-small</button>
+    <a button outline small href="#">a[button][outline][small]</a>
+    <button outline small>button[outline][small]</button>
   </p>
 
   <p>
-    <a button class="button-clear button-small" href="#">a[button].button-clear.button-small</a>
-    <button class="button-clear button-small">button.button-clear.button-small</button>
+    <a button clear small href="#">a[button][clear][small]</a>
+    <button clear small>button[clear][small]</button>
   </p>
 
   <p>
-    <button class="button-large">button.button-large</button>
-    <a button class="button-large" href="#">
+    <button large>[large]</button>
+    <a button large href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
       <span style="font-size:32px">L</span>
@@ -36,13 +36,13 @@
   </p>
 
   <p>
-    <a button class="button-outline button-large" href="#">a[button].button-outline.button-large</a>
-    <button class="button-outline button-large">button.button-outline.button-large</button>
+    <a button outline large href="#">a[button][outline][large]</a>
+    <button outline large>button[outline][large]</button>
   </p>
 
   <p>
-    <a button class="button-clear button-large" href="#">a.button-clear.button-large</a>
-    <button class="button-clear button-large">button.button-clear.button-large</button>
+    <a button clear large href="#">a[clear][large]</a>
+    <button clear large>button[clear][large]</button>
   </p>
 
 </ion-content>