diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index b4350f1a0a..96aaad3c9a 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -21,8 +21,15 @@ $button-hover-opacity:            0.8 !default;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
+  transition: background-color, opacity 100ms linear;
+  margin: $button-margin;
+  padding: $button-padding;
+  min-height: $button-height;
   line-height: 1;
 
+  border: 1px solid #ccc;
+  border: transparent;
+  border-radius: $button-border-radius;
 
   font-size: $button-font-size;
   font-family: inherit;
@@ -43,6 +50,17 @@ $button-hover-opacity:            0.8 !default;
   @include user-select-none();
   @include appearance(none);
 
+  background: $button-color;
+   color: $button-text-color;
+   &:hover:not(.disable-hover) {
+     opacity: $button-hover-opacity;
+     text-decoration: none;
+   }
+   &.activated {
+     opacity: 1;
+     background-color: $button-color-activated;
+   }
+
   // Button Types
   // --------------------------------------------------
 
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index b181c992d5..1daf65adb4 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -28,7 +28,10 @@ import {Config} from '../../config/config';
   * Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes.
  */
 @Directive({
-  selector: 'button,[button]'
+  selector: 'button,[button]',
+  host: {
+    'class': 'button'
+  }
 })
 export class Button {
 
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 962fd008f5..ae3ee9ab77 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -9,9 +9,7 @@
 // iOS Button (largely the core button styles)
 // --------------------------------------------------
 
-button {
-  &[block] {
-    // This fixes an issue with flexbox and button on iOS Safari. See #225
-    display: block;
-  }
+.button-block {
+  // This fixes an issue with flexbox and button on iOS Safari. See #225
+  display: block;
 }
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 28bef83dc6..6af9a1b61b 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -26,8 +26,7 @@ $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4p
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
 
 
-button,
-[button] {
+.button {
   border-radius: $button-md-border-radius;
 
   min-height: $button-md-min-height;
@@ -46,96 +45,89 @@ button,
   &:hover:not(.disable-hover) {
     background-color: $button-md-clear-hover-background-color;
   }
-
-  &[full] {
-    border-radius: 0;
-  }
-
-  &[round] {
-    border-radius: $button-round-border-radius;
-    padding: $button-round-padding;
-  }
-
-  &[large] {
-    padding: 0 $button-large-padding;
-    min-height: $button-large-height;
-    font-size: $button-large-font-size;
-  }
-
-  &[small] {
-    padding: 0 $button-small-padding;
-    min-height: $button-small-height;
-    font-size: $button-small-font-size;
-  }
-
-  &.activated {
-    box-shadow: $button-md-box-shadow-active;
-  }
-
-  &[fab] {
-    border-radius: 50%;
-    box-shadow: $button-md-fab-box-shadow;
-
-    &.activated {
-      box-shadow: $button-md-fab-box-shadow-active;
-    }
-  }
-
-  &.icon-only {
-    padding: 0;
-  }
-
-  &[outline] {
-    box-shadow: none;
-
-    &.activated {
-      opacity: 1;
-    }
-
-    md-ripple {
-      background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
-    }
-  }
-
-  &[clear] {
-    opacity: 1;
-    box-shadow: none;
-
-    &.activated {
-      background-color: $button-md-clear-active-background-color;
-    }
-  }
-
 }
 
+.button-full {
+  border-radius: 0;
+}
+
+.button-round {
+  border-radius: $button-round-border-radius;
+  padding: $button-round-padding;
+}
+
+.button-large {
+  padding: 0 $button-large-padding;
+  min-height: $button-large-height;
+  font-size: $button-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-small-padding;
+  min-height: $button-small-height;
+  font-size: $button-small-font-size;
+}
+
+&.activated {
+  box-shadow: $button-md-box-shadow-active;
+}
+
+.button-fab {
+  border-radius: 50%;
+  box-shadow: $button-md-fab-box-shadow;
+
+  &.activated {
+    box-shadow: $button-md-fab-box-shadow-active;
+  }
+}
+
+.button-icon-only {
+  padding: 0;
+}
+
+.button-outline {
+  box-shadow: none;
+
+  &.activated {
+    opacity: 1;
+  }
+
+  md-ripple {
+    background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+  }
+}
+
+.button-clear {
+  opacity: 1;
+  box-shadow: none;
+
+  &.activated {
+    background-color: $button-md-clear-active-background-color;
+  }
+}
 
 // Material Design Button Color Mixin
 // --------------------------------------------------
 
 @mixin button-theme-md($color-name, $color-value) {
 
-  button[#{$color-name}],
-  [button][#{$color-name}] {
+  .button-#{$color-name}.activated {
+    opacity: 1;
+  }
+
+  .button-outline {
+
+    md-ripple {
+      background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
+    }
 
     &.activated {
       opacity: 1;
-    }
-
-    &[outline] {
 
       md-ripple {
-        background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
-      }
-
-      &.activated {
-        opacity: 1;
-
-        md-ripple {
-          background: rgba(0, 0, 0, 0.1);
-        }
+        background: rgba(0, 0, 0, 0.1);
       }
     }
-
   }
 
 }
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index 389c58a396..7cca21f370 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[button].button-block</a>
-    <button block>button.button-block</button>
+    <a button class="button-block" href="#">a block</a>
+    <button class="button-block">block</button>
   </p>
 
   <p>
-    <a button class="button-block" href="#"><icon help-circle></icon> a[button].button-block icon</a>
-    <button block><icon help-circle></icon> button.button-block icon</button>
+    <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>
   </p>
 
   <p>
-    <a button class="button-block button-outline-secondary" href="#">a[button].button-block.button-outline-secondary</a>
-    <button class="button-block button-outline-secondary">button.button-block.button-outline-secondary</button>
+    <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>
   </p>
 
   <p>
-    <a button class="button-block button-clear-dark" href="#">a[button].button-block.button-clear-dark</a>
-    <button class="button-block button-clear-dark">button.button-block.button-clear-dark</button>
+    <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>
   </p>
 
   <p>
-    <a button class="button-block button-round" href="#">a[button].button-block.button-round</a>
-    <button class="button-block button-round">button.button-block.button-round</button>
+    <a button class="button-block button-round" href="#">a block round</a>
+    <button class="button-block button-round">button block ound</button>
   </p>
 
   <p>
-    <a button class="button-block button-round button-outline" href="#">a[button].button-block.button-round.button-outline</a>
-    <button class="button-block button-round button-outline">button.button-block.button-round.button-outline</button>
+    <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>
   </p>
 
 </ion-content>