diff --git a/scripts/gulp/util.ts b/scripts/gulp/util.ts
index 2ceb5989bb..6d29bcc114 100644
--- a/scripts/gulp/util.ts
+++ b/scripts/gulp/util.ts
@@ -72,9 +72,8 @@ export function createTempTsConfig(includeGlob: string[], target: string, module
       path.join(PROJECT_ROOT, 'src/components/index.ts'),
     ]);
 
-  config.exclude = [
-    './components/badge/**/*'
-  ];
+  console.log('excluding core components from ng buld:');
+  console.log(config.exclude);
 
   if (overrideCompileOptions) {
     config.compilerOptions = Object.assign(config.compilerOptions, overrideCompileOptions);
diff --git a/src/components/button/button-icon.scss b/src/components/button/button-icon.scss
index 1412e939df..e9f8bc80ef 100644
--- a/src/components/button/button-icon.scss
+++ b/src/components/button/button-icon.scss
@@ -14,23 +14,23 @@
 [icon-left] ion-icon {
   @include button-icon;
 
-  padding-right: .3em;
+  @include padding-horizontal(null, .3em);
 }
 
 [icon-right] ion-icon {
   @include button-icon;
 
-  padding-left: .4em;
+  @include padding-horizontal(.4em, null);
 }
 
 .button[icon-only] {
-  padding: 0;
+  @include padding(0);
 
   min-width: .9em;
 }
 
 [icon-only] ion-icon {
-  padding: 0 .5em;
+  @include padding(0, .5em);
 
   font-size: 1.8em;
   line-height: .67;
diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss
index 3a70f7eb3f..0b53a53b3a 100644
--- a/src/components/button/button.ios.scss
+++ b/src/components/button/button.ios.scss
@@ -1,15 +1,37 @@
 @import "../../themes/ionic.globals.ios";
-@import "./button";
-@import "./toolbar-button";
 
 // iOS Button
 // --------------------------------------------------
 
-/// @prop - Margin of the button
-$button-ios-margin:                                 .4rem .2rem !default;
+// deprecated
+$button-ios-margin:                                 null !default;
 
-/// @prop - Padding of the button
-$button-ios-padding:                                0 1em !default;
+/// @prop - Margin top of the button
+$button-ios-margin-top:                             .4rem !default;
+
+/// @prop - Margin end of the button
+$button-ios-margin-end:                             .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-ios-margin-bottom:                          .4rem !default;
+
+/// @prop - Margin start of the button
+$button-ios-margin-start:                           .2rem !default;
+
+// deprecated
+$button-ios-padding:                                null !default;
+
+/// @prop - Padding top of the button
+$button-ios-padding-top:                            0 !default;
+
+/// @prop - Padding end of the button
+$button-ios-padding-end:                            1em !default;
+
+/// @prop - Padding bottom of the button
+$button-ios-padding-bottom:                         $button-ios-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-ios-padding-start:                          $button-ios-padding-end !default;
 
 /// @prop - Height of the button
 $button-ios-height:                                 2.8em !default;
@@ -39,8 +61,20 @@ $button-ios-opacity-hover:                          .8 !default;
 // iOS Large Button
 // --------------------------------------------------
 
-/// @prop - Padding of the large button
-$button-ios-large-padding:                          0 1em !default;
+// deprecated
+$button-ios-large-padding:                          null !default;
+
+/// @prop - Padding top of the large button
+$button-ios-large-padding-top:                      0 !default;
+
+/// @prop - Padding end of the large button
+$button-ios-large-padding-end:                      1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-ios-large-padding-bottom:                   $button-ios-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-ios-large-padding-start:                    $button-ios-large-padding-end !default;
 
 /// @prop - Height of the large button
 $button-ios-large-height:                           2.8em !default;
@@ -52,8 +86,20 @@ $button-ios-large-font-size:                        2rem !default;
 // iOS Small Button
 // --------------------------------------------------
 
-/// @prop - Padding of the small button
-$button-ios-small-padding:                          0 .9em !default;
+// deprecated
+$button-ios-small-padding:                          null !default;
+
+/// @prop - Padding top of the small button
+$button-ios-small-padding-top:                      0 !default;
+
+/// @prop - Padding end of the small button
+$button-ios-small-padding-end:                      .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-ios-small-padding-bottom:                   $button-ios-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-ios-small-padding-start:                    $button-ios-small-padding-end !default;
 
 /// @prop - Height of the small button
 $button-ios-small-height:                           2.1em !default;
@@ -121,8 +167,20 @@ $button-ios-clear-opacity-hover:                    .6 !default;
 // iOS Round Button
 // --------------------------------------------------
 
-/// @prop - Padding of the round button
-$button-ios-round-padding:                          $button-round-padding !default;
+// deprecated
+$button-ios-round-padding:                          null !default;
+
+/// @prop - Padding top of the round button
+$button-ios-round-padding-top:                      $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-ios-round-padding-end:                      $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-ios-round-padding-bottom:                   $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-ios-round-padding-start:                    $button-round-padding-start !default;
 
 /// @prop - Border radius of the round button
 $button-ios-round-border-radius:                    $button-round-border-radius !default;
@@ -139,16 +197,22 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------
 
 .button-ios {
-  margin: $button-ios-margin;
-  padding: $button-ios-padding;
+  @include border-radius($button-ios-border-radius);
 
   height: $button-ios-height;
 
-  border-radius: $button-ios-border-radius;
   font-size: $button-ios-font-size;
 
   color: $button-ios-text-color;
   background-color: $button-ios-background-color;
+
+  @include deprecated-variable(margin, $button-ios-margin) {
+    @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-ios-padding) {
+    @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start);
+  }
 }
 
 .button-ios.activated {
@@ -184,19 +248,23 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------
 
 .button-large-ios {
-  padding: $button-ios-large-padding;
-
   height: $button-ios-large-height;
 
   font-size: $button-ios-large-font-size;
+
+  @include deprecated-variable(padding, $button-ios-large-padding) {
+    @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start);
+  }
 }
 
 .button-small-ios {
-  padding: $button-ios-small-padding;
-
   height: $button-ios-small-height;
 
   font-size: $button-ios-small-font-size;
+
+  @include deprecated-variable(padding, $button-ios-small-padding) {
+    @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start);
+  }
 }
 
 .button-small-ios[icon-only] ion-icon {
@@ -207,29 +275,28 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------
 
 .button-block-ios {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }
 
 // iOS Full Button
 // --------------------------------------------------
 
 .button-full-ios {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);
 
   border-right-width: 0;
   border-left-width: 0;
-  border-radius: 0;
 }
 
 // iOS Outline Button
 // --------------------------------------------------
 
 .button-outline-ios {
+  @include border-radius($button-ios-outline-border-radius);
+
   border-width: $button-ios-outline-border-width;
   border-style: $button-ios-outline-border-style;
-  border-radius: $button-ios-outline-border-radius;
   border-color: $button-ios-outline-border-color;
   color: $button-ios-outline-text-color;
   background-color: $button-ios-outline-background-color;
@@ -306,9 +373,11 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------
 
 .button-round-ios {
-  padding: $button-ios-round-padding;
+  @include border-radius($button-ios-round-border-radius);
 
-  border-radius: $button-ios-round-border-radius;
+  @include deprecated-variable(padding, $button-ios-round-padding) {
+    @include padding($button-ios-round-padding-top, $button-ios-round-padding-end, $button-ios-round-padding-bottom, $button-ios-round-padding-start);
+  }
 }
 
 
diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss
index a13471c347..f6b45299d1 100644
--- a/src/components/button/button.md.scss
+++ b/src/components/button/button.md.scss
@@ -1,15 +1,37 @@
 @import "../../themes/ionic.globals.md";
-@import "./button";
-@import "./toolbar-button";
 
 // Material Design Button
 // --------------------------------------------------
 
-/// @prop - Margin of the button
-$button-md-margin:                         .4rem .2rem !default;
+// deprecated
+$button-md-margin:                         null !default;
 
-/// @prop - Padding of the button
-$button-md-padding:                        0 1.1em !default;
+/// @prop - Margin top of the button
+$button-md-margin-top:                     .4rem !default;
+
+/// @prop - Margin end of the button
+$button-md-margin-end:                     .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-md-margin-bottom:                  .4rem !default;
+
+/// @prop - Margin start of the button
+$button-md-margin-start:                   .2rem !default;
+
+// deprecated
+$button-md-padding:                        null !default;
+
+/// @prop - Padding top of the button
+$button-md-padding-top:                    0 !default;
+
+/// @prop - Padding end of the button
+$button-md-padding-end:                    1.1em !default;
+
+/// @prop - Padding bottom of the button
+$button-md-padding-bottom:                 $button-md-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-md-padding-start:                  $button-md-padding-end !default;
 
 /// @prop - Height of the button
 $button-md-height:                         3.6rem !default;
@@ -51,7 +73,7 @@ $button-md-background-color-activated:     color-shade($button-md-background-col
 $button-md-opacity-activated:              1 !default;
 
 /// @prop - Box shadow of the activated button
-$button-md-box-shadow-activated:           0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default;
+$button-md-box-shadow-activated:           0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default;
 
 /// @prop - Background color of the ripple on the button
 $button-md-ripple-background-color:       #555 !default;
@@ -60,8 +82,20 @@ $button-md-ripple-background-color:       #555 !default;
 // Material Design Large Button
 // --------------------------------------------------
 
-/// @prop - Padding of the large button
-$button-md-large-padding:                  0 1em !default;
+// deprecated
+$button-md-large-padding:                  null !default;
+
+/// @prop - Padding top of the large button
+$button-md-large-padding-top:              0 !default;
+
+/// @prop - Padding end of the large button
+$button-md-large-padding-end:              1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-md-large-padding-bottom:           $button-md-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-md-large-padding-start:            $button-md-large-padding-end !default;
 
 /// @prop - Height of the large button
 $button-md-large-height:                   2.8em !default;
@@ -73,8 +107,20 @@ $button-md-large-font-size:                2rem !default;
 // Material Design Small Button
 // --------------------------------------------------
 
-/// @prop - Padding of the small button
-$button-md-small-padding:                  0 .9em !default;
+// deprecated
+$button-md-small-padding:                  null !default;
+
+/// @prop - Padding top of the small button
+$button-md-small-padding-top:              0 !default;
+
+/// @prop - Padding end of the small button
+$button-md-small-padding-end:              .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-md-small-padding-bottom:           $button-md-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-md-small-padding-start:            $button-md-small-padding-end !default;
 
 /// @prop - Height of the small button
 $button-md-small-height:                   2.1em !default;
@@ -157,8 +203,20 @@ $button-md-clear-ripple-background-color:       #999 !default;
 // Material Design Round Button
 // --------------------------------------------------
 
-/// @prop - Padding of the round button
-$button-md-round-padding:                       $button-round-padding !default;
+// deprecated
+$button-md-round-padding:                       null !default;
+
+/// @prop - Padding top of the round button
+$button-md-round-padding-top:                   $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-md-round-padding-end:                   $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-md-round-padding-bottom:                $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-md-round-padding-start:                 $button-round-padding-start !default;
 
 /// @prop - Border radius of the round button
 $button-md-round-border-radius:                 $button-round-border-radius !default;
@@ -175,15 +233,12 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------
 
 .button-md {
+  @include border-radius($button-md-border-radius);
+
   overflow: hidden;
 
-  margin: $button-md-margin;
-  padding: $button-md-padding;
-
   height: $button-md-height;
 
-  border-radius: $button-md-border-radius;
-
   font-size: $button-md-font-size;
   font-weight: $button-md-font-weight;
 
@@ -195,6 +250,14 @@ $button-md-strong-font-weight:                  bold !default;
   transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
               background-color $button-md-transition-duration $button-md-transition-timing-function,
               color $button-md-transition-duration $button-md-transition-timing-function;
+
+  @include deprecated-variable(margin, $button-md-margin) {
+    @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-md-padding) {
+    @include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start);
+  }
 }
 
 .button-md:hover:not(.disable-hover) {
@@ -243,19 +306,23 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------
 
 .button-large-md {
-  padding: $button-md-large-padding;
-
   height: $button-md-large-height;
 
   font-size: $button-md-large-font-size;
+
+  @include deprecated-variable(padding, $button-md-large-padding) {
+    @include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start);
+  }
 }
 
 .button-small-md {
-  padding: $button-md-small-padding;
-
   height: $button-md-small-height;
 
   font-size: $button-md-small-font-size;
+
+  @include deprecated-variable(padding, $button-md-small-padding) {
+    @include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start);
+  }
 }
 
 .button-small-md[icon-only] ion-icon {
@@ -266,20 +333,18 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------
 
 .button-block-md {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }
 
 // Material Design Full Button
 // --------------------------------------------------
 
 .button-full-md {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);
 
   border-right-width: 0;
   border-left-width: 0;
-  border-radius: 0;
 }
 
 // Material Design Outline Button
@@ -387,13 +452,15 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------
 
 .button-round-md {
-  padding: $button-md-round-padding;
+  @include border-radius($button-md-round-border-radius);
 
-  border-radius: $button-md-round-border-radius;
+  @include deprecated-variable(padding, $button-md-round-padding) {
+    @include padding($button-md-round-padding-top, $button-md-round-padding-end, $button-md-round-padding-bottom, $button-md-round-padding-start);
+  }
 }
 
 .button-md [icon-only] {
-  padding: 0;
+  @include padding(0);
 }
 
 
@@ -403,14 +470,13 @@ $button-md-strong-font-weight:                  bold !default;
 // it's display none, and .md sets to display block.
 
 .button-effect {
+  @include position(0, null, null, 0);
+  @include border-radius(50%);
+
   position: absolute;
-  top: 0;
-  left: 0;
   z-index: 0;
   display: none;
 
-  border-radius: 50%;
-
   background-color: $button-md-ripple-background-color;
   opacity: .2;
 
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 7f7d53bf1c..b806a5fc1f 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -3,8 +3,20 @@
 // Buttons
 // --------------------------------------------------
 
-/// @prop - Padding of the round button
-$button-round-padding:            0 2.6rem !default;
+// deprecated
+$button-round-padding:            null !default;
+
+/// @prop - Padding top of the round button
+$button-round-padding-top:        0 !default;
+
+/// @prop - Padding end of the round button
+$button-round-padding-end:        2.6rem !default;
+
+/// @prop - Padding bottom of the round button
+$button-round-padding-bottom:     $button-round-padding-top !default;
+
+/// @prop - Padding start of the round button
+$button-round-padding-start:      $button-round-padding-end !default;
 
 /// @prop - Border radius of the round button
 $button-round-border-radius:      64px !default;
@@ -13,7 +25,6 @@ $button-round-border-radius:      64px !default;
 .button {
   @include text-align(center);
   @include appearance(none);
-  border: 0;
 
   position: relative;
   z-index: 0;
@@ -35,10 +46,6 @@ $button-round-border-radius:      64px !default;
   contain: content;
 }
 
-ion-button.upgraded {
-  visibility: inherit;
-}
-
 .button-inner {
   display: flex;
 
@@ -98,7 +105,8 @@ button[disabled],
 // --------------------------------------------------
 
 .button-full.button-outline {
+  @include border-radius(0);
+
   border-right-width: 0;
   border-left-width: 0;
-  border-radius: 0;
 }
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 43ba7e908a..115919432c 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,5 +1,9 @@
-import { Component, h, Prop } from '../index';
-type CssClassObject = { [className: string]: boolean };
+import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
+
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
+import { isTrueProperty } from '../../util/util';
+
 
 /**
   * @name Button
@@ -60,217 +64,301 @@ type CssClassObject = { [className: string]: boolean };
   *  <button ion-button small>Small</button>
   * ```
   *
-  */
+  * @advanced
+  *
+  * ```html
+  *
+  * <!-- Bind the color and outline inputs to an expression -->
+  * <button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
+  *   Danger (Solid)
+  * </button>
+  *
+  * <!-- Bind the color and round inputs to an expression -->
+  * <button ion-button [color]="myColor" [round]="isRound">
+  *   Secondary (Round)
+  * </button>
+  *
+  * <!-- Bind the color and clear inputs to an expression -->
+  * <button ion-button [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">
+  *   Primary (Clear)
+  * </button>
+  *
+  * <!-- Bind the color, outline and round inputs to an expression -->
+  * <button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
+  *   Dark (Solid + Round)
+  * </button>
+  *
+  * <!-- Bind the click event to a method -->
+  * <button ion-button (click)="logEvent($event)">
+  *   Click me!
+  * </button>
+  * ```
+  *
+  * ```ts
+  * @Component({
+  *   templateUrl: 'main.html'
+  * })
+  * class E2EPage {
+  *   isDanger: boolean = true;
+  *   isSecondary: boolean = false;
+  *   isRound: boolean = true;
+  *   isOutline: boolean = false;
+  *   isClear: boolean = true;
+  *   myColor: string = 'secondary';
+  *   myColor2: string = 'dark';
+  *
+  *   logEvent(event) {
+  *     console.log(event)
+  *   }
+  * }
+  *
+  * ```
+  *
+  * @demo /docs/demos/src/button/
+  * @see {@link /docs/components#buttons Button Component Docs}
+  * @see {@link /docs/components#fabs FabButton Docs}
+  * @see {@link ../../fab/FabButton FabButton API Docs}
+  * @see {@link ../../fab/FabContainer FabContainer API Docs}
+ */
 @Component({
-  tag: 'ion-button',
-  styleUrls: {
-    ios: 'button.ios.scss',
-    md: 'button.md.scss',
-    wp: 'button.wp.scss'
-  },
-  shadow: false
+  selector: '[ion-button]',
+  template:
+    '<span class="button-inner">' +
+      '<ng-content></ng-content>' +
+    '</span>' +
+    '<div class="button-effect"></div>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
-export class Button {
+export class Button extends Ion {
+  /** @hidden */
+  _role: string = 'button'; // bar-button
 
-  @Prop() href: string;
+  /** @hidden */
+  _size: string; // large/small/default
+
+  /** @hidden */
+  _style: string = 'default'; // outline/clear/solid
+
+  /** @hidden */
+  _shape: string; // round/fab
+
+  /** @hidden */
+  _display: string; // block/full
+
+  /** @hidden */
+  _decorator: string; // strong
+
+  /** @hidden */
+  _init: boolean;
 
   /**
-   * @Prop {string} The type of button.
-   * Possible values are: `"button"`, `"bar-button"`.
+   * @input {boolean} If true, activates the large button size.
    */
-  @Prop() buttonType: string = 'button';
+  @Input()
+  set large(val: boolean) {
+    this._attr('_size', 'large', val);
+  }
 
   /**
-   * @Prop {boolean} If true, activates the large button size.
-   * Type: size
+   * @input {boolean} If true, activates the small button size.
    */
-  @Prop() large: boolean = false;
+  @Input()
+  set small(val: boolean) {
+    this._attr('_size', 'small', val);
+  }
 
   /**
-   * @Prop {boolean} If true, activates the small button size.
-   * Type: size
+   * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
    */
-  @Prop() small: boolean = false;
+  @Input()
+  set default(val: boolean) {
+    this._attr('_size', 'default', val);
+  }
 
   /**
-   * @Prop {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
-   * Type: size
+   * @input {boolean} If true, activates a transparent button style with a border.
    */
-  @Prop() default: boolean = false;
+  @Input()
+  set outline(val: boolean) {
+    this._attr('_style', 'outline', val);
+  }
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, activates a transparent button style without a border.
    */
-  @Prop() disabled: boolean = false;
+  @Input()
+  set clear(val: boolean) {
+    this._attr('_style', 'clear', val);
+  }
 
   /**
-   * @Prop {boolean} If true, activates a transparent button style with a border.
-   * Type: style
+   * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
    */
-  @Prop() outline: boolean = false;
+  @Input()
+  set solid(val: boolean) {
+    this._attr('_style', 'solid', val);
+  }
 
   /**
-   * @Prop {boolean} If true, activates a transparent button style without a border.
-   * Type: style
+   * @input {boolean} If true, activates a button with rounded corners.
    */
-  @Prop() clear: boolean = false;
+  @Input()
+  set round(val: boolean) {
+    this._attr('_shape', 'round', val);
+  }
 
   /**
-   * @Prop {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
-   * Type: style
+   * @input {boolean} If true, activates a button style that fills the available width.
    */
-  @Prop() solid: boolean = false;
+  @Input()
+  set block(val: boolean) {
+    this._attr('_display', 'block', val);
+  }
 
   /**
-   * @Prop {boolean} If true, activates a button with rounded corners.
-   * Type: shape
-   */
-  @Prop() round: boolean = false;
-
-  /**
-   * @Prop {boolean} If true, activates a button style that fills the available width.
-   * Type: display
-   */
-  @Prop() block: boolean = false;
-
-  /**
-   * @Prop {boolean} If true, activates a button style that fills the available width without
+   * @input {boolean} If true, activates a button style that fills the available width without
    * a left and right border.
-   * Type: display
    */
-  @Prop() full: boolean = false;
+  @Input()
+  set full(val: boolean) {
+    this._attr('_display', 'full', val);
+  }
 
   /**
-   * @Prop {boolean} If true, activates a button with a heavier font weight.
-   * Type: decorator
+   * @input {boolean} If true, activates a button with a heavier font weight.
    */
-  @Prop() strong: boolean = false;
+  @Input()
+  set strong(val: boolean) {
+    this._attr('_decorator', 'strong', val);
+  }
 
   /**
-   * @Prop {string} The mode determines which platform styles to use.
+   * @input {string} The mode determines which platform styles to use.
    * Possible values are: `"ios"`, `"md"`, or `"wp"`.
    * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
-  @Prop() mode: 'ios' | 'md' | 'wp';
+  @Input()
+  set mode(val: string) {
+    this._assignCss(false);
+    this._mode = val;
+    this._assignCss(true);
+  }
+
+  /** @hidden */
+  _attr(type: string, attrName: string, attrValue: boolean) {
+    if (type === '_style') {
+      this._updateColor(this._color, false);
+    }
+    this._setClass((<any>this)[type], false);
+    if (isTrueProperty(attrValue)) {
+      (<any>this)[type] = attrName;
+      this._setClass(attrName, true);
+
+    } else {
+      // Special handling for '_style' which defaults to 'default'.
+      (<any>this)[type] = (type === '_style' ? 'default' : null);
+      this._setClass((<any>this)[type], true);
+    }
+    if (type === '_style') {
+      this._updateColor(this._color, true);
+    }
+
+  }
 
   /**
-   * @Prop {string} The color to use from your Sass `$colors` map.
+   * @input {string} The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color: string;
+  @Input()
+  set color(val: string) {
+    this._updateColor(this._color, false);
+    this._updateColor(val, true);
+    this._color = val;
 
-  /**
-   * @hidden
-   */
-  getElementClassList(buttonType: string, mode: string): string[] {
-    if (!buttonType) {
-      return [];
-    }
-    return [
-      buttonType,
-      `${buttonType}-${mode}`
-    ];
   }
 
+  constructor(
+    @Attribute('ion-button') ionButton: string,
+    config: Config,
+    elementRef: ElementRef,
+    renderer: Renderer
+  ) {
+    super(config, elementRef, renderer);
+    this._mode = config.get('mode');
 
-  /**
-   * @hidden
-   */
-  getClassList(buttonType: string, type: string, mode: string): string[] {
-    if (!type) {
-      return [];
+    if (config.get('hoverCSS') === false) {
+      this.setElementClass('disable-hover', true);
     }
-    type = type.toLocaleLowerCase();
-    return [
-      `${buttonType}-${type}`,
-      `${buttonType}-${type}-${mode}`
-    ];
+
+    if (ionButton.trim().length > 0) {
+      this.setRole(ionButton);
+    }
+  }
+
+  /** @hidden */
+  ngAfterContentInit() {
+    this._init = true;
+    this._assignCss(true);
   }
 
   /**
    * @hidden
    */
-  getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
-    style = (buttonType !== 'bar-button' && style === 'solid') ? 'default' : style;
-    let className =
-      buttonType +
-      ((style && style !== 'default') ?
-        '-' + style.toLowerCase() :
-        '');
-
-    return [`${className}-${mode}`].concat(
-        color ? `${className}-${mode}-${color}` : []
-      );
+  setRole(val: string) {
+    this._assignCss(false);
+    this._role = val;
+    this._assignCss(true);
   }
 
-  getStyleClassList(buttonType: string): string[] {
-    let classList = [].concat(
-      this.outline ? this.getColorClassList(this.color, buttonType, 'outline', this.mode) : [],
-      this.clear ? this.getColorClassList(this.color, buttonType, 'clear', this.mode) : [],
-      this.solid ? this.getColorClassList(this.color, buttonType, 'solid', this.mode) : []
-    );
+  /**
+   * @hidden
+   */
+  _assignCss(assignCssClass: boolean) {
+    let role = this._role;
+    if (role) {
+      this.setElementClass(role, assignCssClass); // button
+      this.setElementClass(`${role}-${this._mode}`, assignCssClass); // button
 
-    if (classList.length === 0) {
-      classList = this.getColorClassList(this.color, buttonType, 'default', this.mode);
+      this._setClass(this._style, assignCssClass); // button-clear
+      this._setClass(this._shape, assignCssClass); // button-round
+      this._setClass(this._display, assignCssClass); // button-full
+      this._setClass(this._size, assignCssClass); // button-small
+      this._setClass(this._decorator, assignCssClass); // button-strong
+      this._updateColor(this._color, assignCssClass); // button-secondary, bar-button-secondary
     }
-
-    return classList;
   }
 
-  render() {
-    const size =
-      (this.large ? 'large' : null) ||
-      (this.small ? 'small' : null) ||
-      (this.default ? 'default' : null);
+  /**
+   * @hidden
+   */
+  _setClass(type: string, assignCssClass: boolean) {
+    if (type && this._init) {
+      type = type.toLocaleLowerCase();
+      this.setElementClass(`${this._role}-${type}`, assignCssClass);
+      this.setElementClass(`${this._role}-${type}-${this._mode}`, assignCssClass);
+    }
+  }
 
-    const shape = (this.round ? 'round' : null);
+  /**
+   * @hidden
+   */
+  _updateColor(color: string, isAdd: boolean) {
+    if (color && this._init) {
+      // The class should begin with the button role
+      // button, bar-button
+      let className = this._role;
 
-    const display =
-      (this.block ? 'block' : null) ||
-      (this.full ? 'full' : null);
+      // If the role is not a bar-button, don't apply the solid style
+      let style = this._style;
+      style = (this._role !== 'bar-button' && style === 'solid' ? 'default' : style);
 
-    const decorator = (this.strong ? 'strong' : null);
+      className += (style !== null && style !== '' && style !== 'default' ? '-' + style.toLowerCase() : '');
 
-    const buttonClasses: CssClassObject = []
-      .concat(
-        this.getElementClassList(this.buttonType, this.mode),
-        this.getClassList(this.buttonType, shape, this.mode),
-        this.getClassList(this.buttonType, display, this.mode),
-        this.getClassList(this.buttonType, size, this.mode),
-        this.getClassList(this.buttonType, decorator, this.mode),
-        this.getStyleClassList(this.buttonType)
-      )
-      .reduce((prevValue, cssClass) => {
-        prevValue[cssClass] = true;
-        return prevValue;
-      }, {});
-
-    const tagType = this.href ? 'a' : 'button';
-
-    return h(this,
-      h(tagType, {
-        class: buttonClasses,
-        props: {
-          disabled: this.disabled
-        }
-      },
-        [
-          h('span', {
-              class: {
-                'button-inner': true
-              }
-            },
-            h('slot')
-          ),
-          h('div', {
-              class: {
-                'button-effect': true
-              }
-            }
-          )
-        ]
-      )
-    );
+      if (color !== null && color !== '') {
+        this.setElementClass(`${className}-${this._mode}-${color}`, isAdd);
+      }
+    }
   }
 }
diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss
index 57ddac3b85..d5b67f1610 100644
--- a/src/components/button/button.wp.scss
+++ b/src/components/button/button.wp.scss
@@ -1,15 +1,37 @@
 @import "../../themes/ionic.globals.wp";
-@import "./button";
-@import "./toolbar-button";
 
 // Windows Button
 // --------------------------------------------------
 
-/// @prop - Margin of the button
-$button-wp-margin:                                        .4rem .2rem !default;
+// deprecated
+$button-wp-margin:                                        null !default;
 
-/// @prop - Padding of the button
-$button-wp-padding:                                       0 1.1em !default;
+/// @prop - Margin top of the button
+$button-wp-margin-top:                                    .4rem !default;
+
+/// @prop - Margin end of the button
+$button-wp-margin-end:                                    .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-wp-margin-bottom:                                 .4rem !default;
+
+/// @prop - Margin start of the button
+$button-wp-margin-start:                                  .2rem !default;
+
+// deprecated
+$button-wp-padding:                                       null !default;
+
+/// @prop - Padding top of the button
+$button-wp-padding-top:                                   0 !default;
+
+/// @prop - Padding end of the button
+$button-wp-padding-end:                                   1.1em !default;
+
+/// @prop - Padding bottom of the button
+$button-wp-padding-bottom:                                $button-wp-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-wp-padding-start:                                 $button-wp-padding-end !default;
 
 /// @prop - Height of the button
 $button-wp-height:                                        3.6rem !default;
@@ -42,8 +64,20 @@ $button-wp-background-color-activated:                    color-shade($button-wp
 // Windows Large Button
 // --------------------------------------------------
 
-/// @prop - Padding of the large button
-$button-wp-large-padding:                                 0 1em !default;
+// deprecated
+$button-wp-large-padding:                                 null !default;
+
+/// @prop - Padding top of the large button
+$button-wp-large-padding-top:                             0 !default;
+
+/// @prop - Padding end of the large button
+$button-wp-large-padding-end:                             1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-wp-large-padding-bottom:                          $button-wp-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-wp-large-padding-start:                           $button-wp-large-padding-end !default;
 
 /// @prop - Height of the large button
 $button-wp-large-height:                                  2.8em !default;
@@ -55,8 +89,20 @@ $button-wp-large-font-size:                               2rem !default;
 // Windows Small Button
 // --------------------------------------------------
 
-/// @prop - Padding of the small button
-$button-wp-small-padding:                                 0 .9em !default;
+// deprecated
+$button-wp-small-padding:                                 null !default;
+
+/// @prop - Padding top of the small button
+$button-wp-small-padding-top:                             0 !default;
+
+/// @prop - Padding end of the small button
+$button-wp-small-padding-end:                             .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-wp-small-padding-bottom:                          $button-wp-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-wp-small-padding-start:                           $button-wp-small-padding-end !default;
 
 /// @prop - Height of the small button
 $button-wp-small-height:                                  2.1em !default;
@@ -112,8 +158,20 @@ $button-wp-clear-background-color-hover:                  rgba(158, 158, 158, .1
 // Windows Round Button
 // --------------------------------------------------
 
-/// @prop - Padding of the round button
-$button-wp-round-padding:                                 $button-round-padding !default;
+// deprecated
+$button-wp-round-padding:                                 null !default;
+
+/// @prop - Padding top of the round button
+$button-wp-round-padding-top:                             $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-wp-round-padding-end:                             $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-wp-round-padding-bottom:                          $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-wp-round-padding-start:                           $button-round-padding-start !default;
 
 /// @prop - Border radius of the round button
 $button-wp-round-border-radius:                           $button-round-border-radius !default;
@@ -130,18 +188,24 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------
 
 .button-wp {
-  margin: $button-wp-margin;
-  padding: $button-wp-padding;
+  @include border-radius($button-wp-border-radius);
 
   height: $button-wp-height;
 
   border: $button-wp-border-width $button-wp-border-style $button-wp-border-color;
-  border-radius: $button-wp-border-radius;
 
   font-size: $button-wp-font-size;
 
   color: $button-wp-text-color;
   background-color: $button-wp-background-color;
+
+  @include deprecated-variable(margin, $button-wp-margin) {
+    @include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-wp-padding) {
+    @include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start);
+  }
 }
 
 .button-wp:hover:not(.disable-hover) {
@@ -182,19 +246,23 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------
 
 .button-large-wp {
-  padding: $button-wp-large-padding;
-
   height: $button-wp-large-height;
 
   font-size: $button-wp-large-font-size;
+
+  @include deprecated-variable(padding, $button-wp-large-padding) {
+    @include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start);
+  }
 }
 
 .button-small-wp {
-  padding: $button-wp-small-padding;
-
   height: $button-wp-small-height;
 
   font-size: $button-wp-small-font-size;
+
+  @include deprecated-variable(padding, $button-wp-small-padding) {
+    @include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start);
+  }
 }
 
 .button-small-wp[icon-only] ion-icon {
@@ -205,20 +273,18 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------
 
 .button-block-wp {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }
 
 // Windows Full Button
 // --------------------------------------------------
 
 .button-full-wp {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);
 
   border-right-width: 0;
   border-left-width: 0;
-  border-radius: 0;
 }
 
 // Windows Outline Button
@@ -306,13 +372,15 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------
 
 .button-round-wp {
-  padding: $button-wp-round-padding;
+  @include border-radius($button-wp-round-border-radius);
 
-  border-radius: $button-wp-round-border-radius;
+  @include deprecated-variable(padding, $button-wp-round-padding) {
+    @include padding($button-wp-round-padding-top, $button-wp-round-padding-end, $button-wp-round-padding-bottom, $button-wp-round-padding-start);
+  }
 }
 
 .button-wp [icon-only] {
-  padding: 0;
+  @include padding(0);
 }
 
 
diff --git a/src/components/button/test/anchors/app/app.component.ts b/src/components/button/test/anchors/app/app.component.ts
new file mode 100644
index 0000000000..a356c9ea9b
--- /dev/null
+++ b/src/components/button/test/anchors/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}
diff --git a/src/components/button/test/anchors/app/app.module.ts b/src/components/button/test/anchors/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/anchors/app/app.module.ts
+++ b/src/components/button/test/anchors/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/anchors/app/main.ts b/src/components/button/test/anchors/app/main.ts
new file mode 100644
index 0000000000..6af7a5b2ae
--- /dev/null
+++ b/src/components/button/test/anchors/app/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/src/components/button/test/anchors/e2e.ts b/src/components/button/test/anchors/e2e.ts
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/button/test/anchors/e2e.ts
@@ -0,0 +1 @@
+
diff --git a/src/components/button/test/anchors/pages/page-one/page-one.html b/src/components/button/test/anchors/pages/page-one/page-one.html
new file mode 100644
index 0000000000..20aa4b626b
--- /dev/null
+++ b/src/components/button/test/anchors/pages/page-one/page-one.html
@@ -0,0 +1,52 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Anchor Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center" no-bounce>
+
+  <p>
+    <a ion-button>Default</a>
+    <a ion-button class="activated">Default.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="primary">Primary</a>
+    <a ion-button color="primary" class="activated">Primary.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="secondary">Secondary</a>
+    <a ion-button color="secondary" class="activated">Secondary.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="danger">Danger</a>
+    <a ion-button color="danger" class="activated">Danger.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="light">Light</a>
+    <a ion-button color="light" class="activated">Light.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="dark">Dark</a>
+    <a ion-button color="dark" class="activated">Dark.activated</a>
+  </p>
+
+  <p>
+    <a ion-button disabled>A Disabled</a>
+    <a ion-button color="secondary" disabled>Secondary Disabled</a>
+  </p>
+
+  <p>
+    <a ion-button [color]="btnColor" (click)="chgColor()">Change Color</a>
+    <a ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</a>
+  </p>
+
+</ion-content>
diff --git a/src/components/button/test/anchors/pages/page-one/page-one.module.ts b/src/components/button/test/anchors/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/anchors/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/anchors/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/anchors/pages/page-one/page-one.ts b/src/components/button/test/anchors/pages/page-one/page-one.ts
new file mode 100644
index 0000000000..5b20c1059c
--- /dev/null
+++ b/src/components/button/test/anchors/pages/page-one/page-one.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { App } from '../../../../../..';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  btnColor: string;
+  testingColors = ['primary', 'secondary', 'danger', 'dark'];
+  testingColorIndex = 0;
+
+  constructor(app: App) {
+    app.setTitle('Basic Buttons');
+    this.chgColor();
+  }
+
+  chgColor() {
+    this.btnColor = this.testingColors[this.testingColorIndex];
+    console.log('dynamic btnColor', this.btnColor);
+    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
+  }
+}
diff --git a/src/components/button/test/attributes/app/app.module.ts b/src/components/button/test/attributes/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/attributes/app/app.module.ts
+++ b/src/components/button/test/attributes/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/attributes/pages/page-one/page-one.html b/src/components/button/test/attributes/pages/page-one/page-one.html
index 6dfacc9bf1..9b31e5c9dd 100644
--- a/src/components/button/test/attributes/pages/page-one/page-one.html
+++ b/src/components/button/test/attributes/pages/page-one/page-one.html
@@ -2,10 +2,10 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <ion-button>Default</ion-button>
-      <ion-button solid>Solid</ion-button>
-      <ion-button outline>Outline</ion-button>
-      <ion-button [clear]="isBarClear" (click)="toggleBarClear()">Clear</ion-button>
+      <button ion-button>Default</button>
+      <button ion-button solid>Solid</button>
+      <button ion-button outline>Outline</button>
+      <button ion-button [clear]="isBarClear" (click)="toggleBarClear()">Clear</button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -14,26 +14,26 @@
 
 <ion-content padding style="text-align:center" no-bounce>
   <h5>Button Displays</h5>
-  <ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</ion-button>
-  <ion-button [full]="isFull">Full</ion-button>
-  <ion-button full block>Both</ion-button>
+  <button ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</button>
+  <button ion-button [full]="isFull">Full</button>
+  <button ion-button full block>Both</button>
 
   <h5>Button Styles (Click to Toggle)</h5>
-  <ion-button [solid]="isSolid" (click)="toggleStyles()">Solid</ion-button>
-  <ion-button [outline]="isOutline" (click)="toggleStyles()">Outline</ion-button>
-  <ion-button [clear]="isClear" (click)="toggleStyles()">Clear</ion-button>
+  <button ion-button [solid]="isSolid" (click)="toggleStyles()">Solid</button>
+  <button ion-button [outline]="isOutline" (click)="toggleStyles()">Outline</button>
+  <button ion-button [clear]="isClear" (click)="toggleStyles()">Clear</button>
 
   <h5>Button Sizes</h5>
-  <ion-button small="true">Small</ion-button>
-  <ion-button default="true">Default</ion-button>
-  <ion-button large>Large</ion-button>
+  <button ion-button small="true">Small</button>
+  <button ion-button default="true">Default</button>
+  <button ion-button large>Large</button>
 
   <h5>Button Colors (Click to Toggle)</h5>
-  <ion-button block [color]="isSecondary" (click)="toggleColors()">Block</ion-button>
-  <ion-button solid [color]="isDanger" (click)="toggleColors()">Solid</ion-button>
-  <ion-button outline [color]="isDark" (click)="toggleColors()">Outline</ion-button>
-  <ion-button clear [color]="isSecondary" (click)="toggleColors()">Clear</ion-button>
-  <ion-button (click)="removeColors()">Remove Colors</ion-button>
+  <button ion-button block [color]="isSecondary" (click)="toggleColors()">Block</button>
+  <button ion-button solid [color]="isDanger" (click)="toggleColors()">Solid</button>
+  <button ion-button outline [color]="isDark" (click)="toggleColors()">Outline</button>
+  <button ion-button clear [color]="isSecondary" (click)="toggleColors()">Clear</button>
+  <button ion-button (click)="removeColors()">Remove Colors</button>
 
 </ion-content>
 
@@ -41,10 +41,10 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <ion-button color="secondary">Default</ion-button>
-      <ion-button solid color="danger">Solid</ion-button>
-      <ion-button outline color="dark">Outline</ion-button>
-      <ion-button clear color="secondary">Clear</ion-button>
+      <button ion-button color="secondary">Default</button>
+      <button ion-button solid color="danger">Solid</button>
+      <button ion-button outline color="dark">Outline</button>
+      <button ion-button clear color="secondary">Clear</button>
     </ion-buttons>
   </ion-toolbar>
 
diff --git a/src/components/button/test/attributes/pages/page-one/page-one.module.ts b/src/components/button/test/attributes/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/attributes/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/attributes/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/basic/app/app.module.ts b/src/components/button/test/basic/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/basic/app/app.module.ts
+++ b/src/components/button/test/basic/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/basic/pages/page-one/page-one.html b/src/components/button/test/basic/pages/page-one/page-one.html
index 20a90cad6d..f8211d938d 100644
--- a/src/components/button/test/basic/pages/page-one/page-one.html
+++ b/src/components/button/test/basic/pages/page-one/page-one.html
@@ -8,41 +8,45 @@
 
 
 <ion-content padding style="text-align:center" no-bounce>
+
   <p>
-    <ion-button (click)="test($event)">Default</ion-button>
-    <ion-button (click)="test($event)" class="activated">Default.activated</ion-button>
+    <button ion-button (click)="test($event)">Default</button>
+    <button ion-button (click)="test($event)" class="activated">Default.activated</button>
   </p>
 
   <p>
-    <ion-button color="primary">Primary</ion-button>
-    <ion-button color="primary" class="activated">Primary.activated</ion-button>
+    <button ion-button color="primary">Primary</button>
+    <button ion-button color="primary" class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <ion-button color="secondary">Secondary</ion-button>
-    <ion-button color="secondary" class="activated">Secondary.activated</ion-button>
+    <button ion-button color="secondary">Secondary</button>
+    <button ion-button color="secondary" class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <ion-button color="danger">Danger</ion-button>
-    <ion-button color="danger" class="activated">Danger.activated</ion-button>
+    <button ion-button color="danger">Danger</button>
+    <button ion-button color="danger" class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <ion-button color="light">Light</ion-button>
-    <ion-button color="light" class="activated">Light.activated</ion-button>
+    <button ion-button color="light">Light</button>
+    <button ion-button color="light" class="activated">Light.activated</button>
   </p>
 
   <p>
-    <ion-button color="dark">Dark</ion-button>
-    <ion-button color="dark" class="activated">Dark.activated</ion-button>
+    <button ion-button color="dark">Dark</button>
+    <button ion-button color="dark" class="activated">Dark.activated</button>
   </p>
+
   <p>
-    <ion-button disabled large clear>Button Disabled</ion-button>
-    <ion-button color="secondary" disabled>Secondary Disabled</ion-button>
+    <button ion-button disabled>Button Disabled</button>
+    <button ion-button color="secondary" disabled>Secondary Disabled</button>
   </p>
+
   <p>
-    <ion-button [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
-    <ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
+    <button ion-button [color]="btnColor" (click)="chgColor()">Change Color</button>
+    <button ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</button>
   </p>
+
 </ion-content>
diff --git a/src/components/button/test/basic/pages/page-one/page-one.module.ts b/src/components/button/test/basic/pages/page-one/page-one.module.ts
index a7c1165fd7..0f5e31b5f2 100644
--- a/src/components/button/test/basic/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/basic/pages/page-one/page-one.module.ts
@@ -1,5 +1,5 @@
 
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -13,7 +13,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/block/app/app.module.ts b/src/components/button/test/block/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/block/app/app.module.ts
+++ b/src/components/button/test/block/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/block/pages/page-one/page-one.html b/src/components/button/test/block/pages/page-one/page-one.html
index a71758ba22..8e71b845ad 100644
--- a/src/components/button/test/block/pages/page-one/page-one.html
+++ b/src/components/button/test/block/pages/page-one/page-one.html
@@ -10,31 +10,37 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <ion-button block>button[ion-button][block]</ion-button>
+    <a ion-button block href="#">a[ion-button][block]</a>
+    <button ion-button block>button[ion-button][block]</button>
   </p>
 
   <p>
-    <ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</ion-button>
+    <a ion-button block href="#" icon-left><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
+    <button ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
   </p>
 
   <p>
-    <ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</ion-button>
+    <a ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</a>
+    <button ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</button>
   </p>
 
   <p>
-    <ion-button block clear color="dark">button[ion-button][clear][block][dark]</ion-button>
+    <a ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</a>
+    <button ion-button block clear color="dark">button[ion-button][clear][block][dark]</button>
   </p>
 
   <p>
-    <ion-button block round>button[ion-button][block][round]</ion-button>
+    <a ion-button block round href="#">a[ion-button][block][round]</a>
+    <button ion-button block round>button[ion-button][block][round]</button>
   </p>
 
   <p>
-    <ion-button block round outline>button[ion-button][block][round][outline]</ion-button>
+    <a ion-button block round outline href="#">a[ion-button][block][round][outline]</a>
+    <button ion-button block round outline>button[ion-button][block][round][outline]</button>
   </p>
 
   <p>
-    <ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</ion-button>
+    <button ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/block/pages/page-one/page-one.module.ts b/src/components/button/test/block/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/block/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/block/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/button.spec.ts b/src/components/button/test/button.spec.ts
new file mode 100644
index 0000000000..0a5d6d5471
--- /dev/null
+++ b/src/components/button/test/button.spec.ts
@@ -0,0 +1,264 @@
+import { Button } from '../button';
+import { Config } from '../../../config/config';
+import { mockConfig, mockElementRef, mockRenderer } from '../../../util/mock-providers';
+
+
+describe('button', () => {
+
+  it('should set a different button role', () => {
+    let b = mockButton();
+    b.outline = true;
+    b.small = true;
+    b.full = true;
+    b.color = 'primary';
+    b.setRole('bar-button');
+    b._assignCss(true);
+
+    expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+    expect(hasClass(b, 'bar-button-small')).toEqual(true);
+    expect(hasClass(b, 'bar-button-full')).toEqual(true);
+    expect(hasClass(b, 'bar-button-outline-ios-primary')).toEqual(true);
+
+    expect(hasClass(b, 'button-outline')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(false);
+    expect(hasClass(b, 'button-primary')).toEqual(false);
+  });
+
+  it('should remove button color attributes and add different role', () => {
+    let b = mockButton();
+    b.outline = true;
+    b.small = true;
+    b.full = true;
+    b.color = 'primary';
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+    expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true);
+
+    b._assignCss(false);
+    expect(hasClass(b, 'button-outline')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(false);
+    expect(hasClass(b, 'button-outline-ios-primary')).toEqual(false);
+  });
+
+  it('should read button color attributes with styles', () => {
+    let b = mockButton();
+    b.outline = true;
+    b.small = true;
+    b.full = true;
+    b.color = 'primary';
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+    expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true);
+
+    b = mockButton();
+    b.clear = true;
+    b.color = 'primary';
+    b.color = 'secondary';
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+    expect(hasClass(b, 'button-clear-ios-primary')).toEqual(false);
+    expect(hasClass(b, 'button-clear-ios-secondary')).toEqual(true);
+
+    b = mockButton();
+    b.solid = true;
+    b.color = 'primary';
+    b.color = 'secondary';
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-solid')).toEqual(true);
+    expect(hasClass(b, 'button-ios-primary')).toEqual(false);
+    expect(hasClass(b, 'button-ios-secondary')).toEqual(true);
+
+    b = mockButton();
+    b.solid = true;
+    b.color = 'primary';
+    b.color = 'secondary';
+
+    b.setRole('bar-button');
+    b._assignCss(true);
+    expect(hasClass(b, 'bar-button-solid')).toEqual(true);
+    expect(hasClass(b, 'bar-button-solid-ios-primary')).toEqual(false);
+    expect(hasClass(b, 'bar-button-solid-ios-secondary')).toEqual(true);
+  });
+
+  it('should auto add the default style', () => {
+    let b = mockButton();
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-default')).toEqual(true);
+
+    b = mockButton();
+    b.clear = true;
+
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-default')).toEqual(false);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+  });
+
+  it('should read button color attributes', () => {
+    let b = mockButton();
+    b.color = 'primary';
+    b._assignCss(true);
+    expect(hasClass(b, 'button-ios-primary')).toEqual(true);
+
+    b = mockButton();
+    b.color = 'primary';
+    b.color = 'secondary';
+    b._assignCss(true);
+    expect(hasClass(b, 'button-ios-primary')).toEqual(false);
+    expect(hasClass(b, 'button-ios-secondary')).toEqual(true);
+  });
+
+  it('should read button style attributes', () => {
+    let b = mockButton();
+    b.clear = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+
+    b = mockButton();
+    b.outline = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+
+    b = mockButton();
+    b.solid = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-solid')).toEqual(true);
+
+    b = mockButton();
+    b.clear = true;
+    b.outline = true;
+    b.small = true;
+    b.full = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-clear')).toEqual(false);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+
+    b = mockButton();
+    b.outline = true;
+    b.setRole('bar-button');
+    b._assignCss(true);
+    expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+  });
+
+  it('should read button shape attributes', () => {
+    let b = mockButton();
+    b.round = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-round')).toEqual(true);
+  });
+
+  it('should read button display attributes', () => {
+    let b = mockButton();
+    b.block = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-block')).toEqual(true);
+
+    b = mockButton();
+    b.full = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+
+    b = mockButton();
+    b.block = true;
+    b.full = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-block')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+  });
+
+  it('should read button size attributes', () => {
+    let b = mockButton();
+    b.small = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+
+    b = mockButton();
+    b.large = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-large')).toEqual(true);
+
+    b = mockButton();
+    b.large = true;
+    b.small = true;
+    b._assignCss(true);
+    expect(hasClass(b, 'button-large')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+  });
+
+  it('should add button css class', () => {
+    let b = mockButton();
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+  });
+
+  it('should add disable-hover css class', () => {
+    let config = mockConfig({
+      hoverCSS: false
+    });
+    let b = mockButton(config);
+
+    expect(hasClass(b, 'disable-hover')).toEqual(true);
+  });
+
+  it('should set defaults', () => {
+    let b = mockButton();
+    expect(b._role).toEqual('button');
+    expect(b._size).toEqual(undefined);
+    expect(b._color).toEqual(undefined);
+    expect(b._style).toEqual('default');
+    expect(b._display).toEqual(undefined);
+  });
+
+  it('should set different modes', () => {
+    let b = mockButton();
+
+    b._assignCss(true);
+    expect(b._mode).toEqual('ios');
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-ios')).toEqual(true);
+
+    b.mode = 'wp';
+    expect(b._mode).toEqual('wp');
+    expect(hasClass(b, 'button-wp')).toEqual(true);
+
+    b.mode = 'blah';
+    expect(b._mode).toEqual('blah');
+    expect(hasClass(b, 'button-blah')).toEqual(true);
+  });
+
+  it('should add alert-button css class', () => {
+    let b = mockButton(null, 'alert-button');
+    b._assignCss(true);
+    expect(hasClass(b, 'alert-button')).toEqual(true);
+  });
+
+});
+
+function mockButton(config?: Config, ionButton?: string) {
+  config = config || mockConfig();
+  ionButton = ionButton || '';
+  let b = new Button(ionButton, config, mockElementRef(), mockRenderer());
+  b._init = true;
+  b.mode = 'ios';
+  return b;
+}
+
+function hasClass(button: any, className: string) {
+  return button._elementRef.nativeElement.classList.contains(className);
+}
diff --git a/src/components/button/test/clear/app/app.module.ts b/src/components/button/test/clear/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/clear/app/app.module.ts
+++ b/src/components/button/test/clear/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/clear/pages/page-one/page-one.html b/src/components/button/test/clear/pages/page-one/page-one.html
index cdbdad2c0e..ed46bce976 100644
--- a/src/components/button/test/clear/pages/page-one/page-one.html
+++ b/src/components/button/test/clear/pages/page-one/page-one.html
@@ -10,37 +10,37 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <ion-button clear>Default</ion-button>
-    <ion-button clear class="activated">Default.activated</ion-button>
+    <button ion-button clear>Default</button>
+    <button ion-button clear class="activated">Default.activated</button>
   </p>
 
   <p>
-    <ion-button clear color="primary">Primary</ion-button>
-    <ion-button clear color="primary" class="activated">Primary.activated</ion-button>
+    <button ion-button clear color="primary">Primary</button>
+    <button ion-button clear color="primary" class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <ion-button clear color="secondary">Secondary</ion-button>
-    <ion-button clear color="secondary" class="activated">Secondary.activated</ion-button>
+    <button ion-button clear color="secondary">Secondary</button>
+    <button ion-button clear color="secondary" class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <ion-button clear color="danger">Danger</ion-button>
-    <ion-button clear color="danger" class="activated">Danger.activated</ion-button>
+    <button ion-button clear color="danger">Danger</button>
+    <button ion-button clear color="danger" class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <ion-button clear color="light">Light</ion-button>
-    <ion-button clear color="light" class="activated">Light.activated</ion-button>
+    <button ion-button clear color="light">Light</button>
+    <button ion-button clear color="light" class="activated">Light.activated</button>
   </p>
 
   <p>
-    <ion-button clear color="dark">Dark</ion-button>
-    <ion-button clear color="dark" class="activated">Dark.activated</ion-button>
+    <button ion-button clear color="dark">Dark</button>
+    <button ion-button clear color="dark" class="activated">Dark.activated</button>
   </p>
 
   <p>
-    <ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</ion-button>
+    <button ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/clear/pages/page-one/page-one.module.ts b/src/components/button/test/clear/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/clear/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/clear/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/decorator/app/app.module.ts b/src/components/button/test/decorator/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/decorator/app/app.module.ts
+++ b/src/components/button/test/decorator/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/decorator/pages/page-one/page-one.html b/src/components/button/test/decorator/pages/page-one/page-one.html
index f237ec1250..118ac14ec1 100644
--- a/src/components/button/test/decorator/pages/page-one/page-one.html
+++ b/src/components/button/test/decorator/pages/page-one/page-one.html
@@ -3,9 +3,9 @@
   <ion-toolbar>
     <ion-title>Outline Buttons</ion-title>
     <ion-buttons end>
-      <ion-button [strong]="strong" (click)="strong = !strong" class="e2eButtonEdit">
+      <button ion-button [strong]="strong" (click)="strong = !strong" class="e2eButtonEdit">
         {{strong ? 'Done' : 'Edit' }}
-      </ion-button>
+      </button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -15,43 +15,43 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <ion-button [strong]="strong" small>Default (small)</ion-button>
-    <ion-button strong small>Default (small)</ion-button>
+    <button ion-button [strong]="strong" small>Default (small)</button>
+    <button ion-button strong small>Default (small)</button>
   </p>
 
   <p>
-    <ion-button outline [strong]="strong" color="secondary">Outline</ion-button>
-    <ion-button outline strong color="secondary">Outline</ion-button>
+    <button ion-button outline [strong]="strong" color="secondary">Outline</button>
+    <button ion-button outline strong color="secondary">Outline</button>
   </p>
 
   <p>
-    <ion-button block [strong]="strong" color="danger" large>Block (large)</ion-button>
-    <ion-button block strong color="danger" large>Block (large)</ion-button>
+    <button ion-button block [strong]="strong" color="danger" large>Block (large)</button>
+    <button ion-button block strong color="danger" large>Block (large)</button>
   </p>
 
   <p>
-    <ion-button full [strong]="strong" color="dark">Full</ion-button>
-    <ion-button full strong color="dark">Default</ion-button>
+    <button ion-button full [strong]="strong" color="dark">Full</button>
+    <button ion-button full strong color="dark">Default</button>
   </p>
 
   <p>
-    <ion-button raised [strong]="strong" color="light">Raised</ion-button>
-    <ion-button raised strong color="light">Raised</ion-button>
+    <button ion-button raised [strong]="strong" color="light">Raised</button>
+    <button ion-button raised strong color="light">Raised</button>
   </p>
 
   <p>
-    <ion-button round [strong]="strong">Round</ion-button>
-    <ion-button round strong>Round</ion-button>
+    <button ion-button round [strong]="strong">Round</button>
+    <button ion-button round strong>Round</button>
   </p>
 
   <p>
-    <ion-button clear [strong]="strong">Clear</ion-button>
-    <ion-button clear strong>Clear</ion-button>
+    <button ion-button clear [strong]="strong">Clear</button>
+    <button ion-button clear strong>Clear</button>
   </p>
 
   <p>
-    <ion-button clear [strong]="strong">Default</ion-button>
-    <ion-button clear strong>Default</ion-button>
+    <button ion-button clear [strong]="strong">Default</button>
+    <button ion-button clear strong>Default</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/decorator/pages/page-one/page-one.module.ts b/src/components/button/test/decorator/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/decorator/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/decorator/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/dynamic/app/app.module.ts b/src/components/button/test/dynamic/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/dynamic/app/app.module.ts
+++ b/src/components/button/test/dynamic/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/dynamic/pages/page-one/page-one.html b/src/components/button/test/dynamic/pages/page-one/page-one.html
index d83eab404b..35d587a618 100644
--- a/src/components/button/test/dynamic/pages/page-one/page-one.html
+++ b/src/components/button/test/dynamic/pages/page-one/page-one.html
@@ -2,12 +2,12 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <ion-button color="danger" *ngIf="showIf">ngIf</ion-button>
-      <ion-button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</ion-button>
+      <button ion-button color="danger" *ngIf="showIf">ngIf</button>
+      <button ion-button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
     <ion-buttons end>
-      <ion-button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</ion-button>
+      <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -16,25 +16,25 @@
 
 <ion-content padding>
 
-  <ion-button block [solid]="isSolid">Solid</ion-button>
-  <ion-button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</ion-button>
-  <ion-button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</ion-button>
-  <ion-button block [color]="myColor1" [round]="isCustom">Custom #1</ion-button>
-  <ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</ion-button>
+  <button ion-button block [solid]="isSolid">Solid</button>
+  <button ion-button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
+  <button ion-button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</button>
+  <button ion-button block [color]="myColor1" [round]="isCustom">Custom #1</button>
+  <button ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
   <hr/>
-  <ion-button block color="secondary" [outline]="!liked" (click)="reportLike(true)" class="e2eButtonToggle">Secondary (Toggle)</ion-button>
-  <ion-button block color="danger" [outline]="liked !== false" (click)="reportLike(false)">Danger (Toggle)</ion-button>
+  <button ion-button block color="secondary" [outline]="!liked" (click)="reportLike(true)" class="e2eButtonToggle">Secondary (Toggle)</button>
+  <button ion-button block color="danger" [outline]="liked !== false" (click)="reportLike(false)">Danger (Toggle)</button>
   <hr/>
-  <ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</ion-button>
+  <button ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</button>
   <hr/>
-  <ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</ion-button>
-  <ion-button block clear color="danger" (click)="reset()">Reset all buttons</ion-button>
-  <ion-button small *ngFor="let button of buttons"
+  <button ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
+  <button ion-button block clear color="danger" (click)="reset()">Reset all buttons</button>
+  <button ion-button small *ngFor="let button of buttons"
           [outline]="!button.selected && button.value !== value"
           [color]="(button.selected || button.value === value) ? button.value : 'secondary'"
           (click)="setValue(button.value)">
     <ion-icon *ngIf="button.icon" name="{{button.icon}}"></ion-icon>
     {{button.text}}
-  </ion-button>
+  </button>
 
 </ion-content>
diff --git a/src/components/button/test/dynamic/pages/page-one/page-one.module.ts b/src/components/button/test/dynamic/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/dynamic/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/dynamic/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/full/app/app.module.ts b/src/components/button/test/full/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/full/app/app.module.ts
+++ b/src/components/button/test/full/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/full/pages/page-one/page-one.html b/src/components/button/test/full/pages/page-one/page-one.html
index fc141171e7..0fc256fde6 100644
--- a/src/components/button/test/full/pages/page-one/page-one.html
+++ b/src/components/button/test/full/pages/page-one/page-one.html
@@ -11,7 +11,7 @@
 
   <p>
     <a ion-button full href="#">a[ion-button][full]</a>
-    <ion-button full>button[ion-button][full]</ion-button>
+    <button ion-button full>button[ion-button][full]</button>
   </p>
 
   <p>
@@ -19,25 +19,25 @@
       <ion-icon name="help-circle"></ion-icon>
       a[ion-button][full] + icon
     </a>
-    <ion-button full icon-left>
+    <button ion-button full icon-left>
       <ion-icon name="help-circle"></ion-icon>
       button[ion-button][full] + icon
-    </ion-button>
+    </button>
   </p>
 
   <p>
     <a ion-button full outline color="secondary" href="#">a[ion-button][full][outline][secondary]</a>
-    <ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</ion-button>
+    <button ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</button>
   </p>
 
   <p>
     <a ion-button full clear color="light" href="#">a[ion-button][full][clear][light]</a>
-    <ion-button full clear color="light">button[ion-button][full][clear][light]</ion-button>
+    <button ion-button full clear color="light">button[ion-button][full][clear][light]</button>
   </p>
 
   <p>
     <a ion-button full clear color="dark" href="#">a[ion-button][full][clear][dark]</a>
-    <ion-button full clear color="dark">button[ion-button][full][clear][dark]</ion-button>
+    <button ion-button full clear color="dark">button[ion-button][full][clear][dark]</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/full/pages/page-one/page-one.module.ts b/src/components/button/test/full/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/full/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/full/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/icons/app/app.module.ts b/src/components/button/test/icons/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/icons/app/app.module.ts
+++ b/src/components/button/test/icons/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/icons/pages/page-one/page-one.html b/src/components/button/test/icons/pages/page-one/page-one.html
index 02fa604861..478de32a98 100644
--- a/src/components/button/test/icons/pages/page-one/page-one.html
+++ b/src/components/button/test/icons/pages/page-one/page-one.html
@@ -10,10 +10,10 @@
 <ion-content padding>
 
   <div>
-    <ion-button icon-left>
+    <button ion-button icon-left>
       <ion-icon name="home"></ion-icon>
       Left Icon
-    </ion-button>
+    </button>
     <a ion-button icon-left>
       <ion-icon name="home"></ion-icon>
       Left Icon
@@ -21,10 +21,10 @@
   </div>
 
   <div>
-    <ion-button icon-right>
+    <button ion-button icon-right>
       Right Icon
       <ion-icon name="star"></ion-icon>
-    </ion-button>
+    </button>
     <a ion-button icon-right>
       Right Icon
       <ion-icon name="star"></ion-icon>
@@ -32,19 +32,19 @@
   </div>
 
   <div>
-    <ion-button icon-only>
+    <button ion-button icon-only>
       <ion-icon name="flag"></ion-icon>
-    </ion-button>
+    </button>
     <a ion-button icon-only>
       <ion-icon name="flag"></ion-icon>
     </a>
   </div>
 
   <div>
-    <ion-button large icon-left>
+    <button ion-button large icon-left>
       <ion-icon name="help-circle"></ion-icon>
       Left, Large
-    </ion-button>
+    </button>
     <a ion-button large icon-left>
       <ion-icon name="help-circle"></ion-icon>
       Left, Large
@@ -52,10 +52,10 @@
   </div>
 
   <div>
-    <ion-button large icon-right>
+    <button ion-button large icon-right>
       Right, Large
       <ion-icon name="settings"></ion-icon>
-    </ion-button>
+    </button>
     <a ion-button large icon-right>
       Right, Large
       <ion-icon name="settings"></ion-icon>
@@ -63,19 +63,19 @@
   </div>
 
   <div>
-    <ion-button large icon-only>
+    <button ion-button large icon-only>
       <ion-icon name="heart"></ion-icon>
-    </ion-button>
+    </button>
     <a ion-button large icon-only>
       <ion-icon name="heart"></ion-icon>
     </a>
   </div>
 
   <div>
-    <ion-button small icon-left>
+    <button ion-button small icon-left>
       <ion-icon name="checkmark"></ion-icon>
       Left, Small
-    </ion-button>
+    </button>
     <a ion-button small icon-left>
       <ion-icon name="checkmark"></ion-icon>
       Left, Small
@@ -83,10 +83,10 @@
   </div>
 
   <div>
-    <ion-button small icon-right>
+    <button ion-button small icon-right>
       Right, Small
       <ion-icon name="arrow-forward"></ion-icon>
-    </ion-button>
+    </button>
     <a ion-button small icon-right>
       Right, Small
       <ion-icon name="arrow-forward"></ion-icon>
@@ -94,9 +94,9 @@
   </div>
 
   <div>
-    <ion-button small icon-only>
+    <button ion-button small icon-only>
       <ion-icon name="search"></ion-icon>
-    </ion-button>
+    </button>
     <a ion-button small icon-only>
       <ion-icon name="search"></ion-icon>
     </a>
diff --git a/src/components/button/test/icons/pages/page-one/page-one.module.ts b/src/components/button/test/icons/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/icons/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/icons/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/outline/app/app.module.ts b/src/components/button/test/outline/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/outline/app/app.module.ts
+++ b/src/components/button/test/outline/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/outline/pages/page-one/page-one.html b/src/components/button/test/outline/pages/page-one/page-one.html
index 30f9d5ca21..3435e06bbd 100644
--- a/src/components/button/test/outline/pages/page-one/page-one.html
+++ b/src/components/button/test/outline/pages/page-one/page-one.html
@@ -10,53 +10,53 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <ion-button outline>Default</ion-button>
-    <ion-button outline class="activated">Default.activated</ion-button>
+    <button ion-button outline>Default</button>
+    <button ion-button outline class="activated">Default.activated</button>
   </p>
 
   <p>
-    <ion-button outline color="primary">Primary</ion-button>
-    <ion-button outline color="primary" class="activated">Primary.activated</ion-button>
+    <button ion-button outline color="primary">Primary</button>
+    <button ion-button outline color="primary" class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <ion-button outline color="secondary">Secondary</ion-button>
-    <ion-button outline color="secondary" class="activated">Secondary.activated</ion-button>
+    <button ion-button outline color="secondary">Secondary</button>
+    <button ion-button outline color="secondary" class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <ion-button outline color="danger">Danger</ion-button>
-    <ion-button outline color="danger" class="activated">Danger.activated</ion-button>
+    <button ion-button outline color="danger">Danger</button>
+    <button ion-button outline color="danger" class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <ion-button outline color="light">Light</ion-button>
-    <ion-button outline color="light" class="activated">Light.activated</ion-button>
+    <button ion-button outline color="light">Light</button>
+    <button ion-button outline color="light" class="activated">Light.activated</button>
   </p>
 
   <p>
-    <ion-button outline color="dark">Dark</ion-button>
-    <ion-button outline color="dark" class="activated">Dark.activated</ion-button>
+    <button ion-button outline color="dark">Dark</button>
+    <button ion-button outline color="dark" class="activated">Dark.activated</button>
   </p>
 
   <p>
-    <ion-button outline block>button[ion-button][outline][block]</ion-button>
+    <button ion-button outline block>button[ion-button][outline][block]</button>
   </p>
 
   <p>
-    <ion-button outline block class="activated">[outline][block].activated</ion-button>
+    <button ion-button outline block class="activated">[outline][block].activated</button>
   </p>
 
   <p>
-    <ion-button outline block color="secondary">button[ion-button][outline][block][secondary]</ion-button>
+    <button ion-button outline block color="secondary">button[ion-button][outline][block][secondary]</button>
   </p>
 
   <p>
-    <ion-button outline block color="secondary" class="activated">[outline][block][secondary].activated</ion-button>
+    <button ion-button outline block color="secondary" class="activated">[outline][block][secondary].activated</button>
   </p>
 
   <p>
-    <ion-button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</ion-button>
+    <button ion-button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/outline/pages/page-one/page-one.module.ts b/src/components/button/test/outline/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/outline/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/outline/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/raised/app.module.ts b/src/components/button/test/raised/app.module.ts
index 6050e94740..20982bd470 100644
--- a/src/components/button/test/raised/app.module.ts
+++ b/src/components/button/test/raised/app.module.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../..';
 
@@ -27,7 +27,6 @@ export class AppComponent {
   bootstrap: [IonicApp],
   entryComponents: [
     E2EPage
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class AppModule {}
diff --git a/src/components/button/test/raised/main.html b/src/components/button/test/raised/main.html
index cd4de877d6..c55675bbdf 100644
--- a/src/components/button/test/raised/main.html
+++ b/src/components/button/test/raised/main.html
@@ -10,32 +10,32 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <ion-button raised><span>Default</span></ion-button>
-    <ion-button raised raised class="activated">Default.activated</ion-button>
+    <button ion-button raised><span>Default</span></button>
+    <button ion-button raised raised class="activated">Default.activated</button>
   </p>
 
   <p>
-    <ion-button raised outline>Outline</ion-button>
-    <ion-button raised outline class="activated">Outline.activated</ion-button>
+    <button ion-button raised outline>Outline</button>
+    <button ion-button raised outline class="activated">Outline.activated</button>
   </p>
 
   <p>
-    <ion-button raised clear>Clear</ion-button>
-    <ion-button raised clear class="activated">Clear.activated</ion-button>
+    <button ion-button raised clear>Clear</button>
+    <button ion-button raised clear class="activated">Clear.activated</button>
   </p>
 
   <p>
-    <ion-button raised round>Round</ion-button>
-    <ion-button raised round class="activated">Round.activated</ion-button>
+    <button ion-button raised round>Round</button>
+    <button ion-button raised round class="activated">Round.activated</button>
   </p>
 
   <p>
-    <ion-button raised block>Block</ion-button>
-    <ion-button raised block class="activated">Block.activated</ion-button>
+    <button ion-button raised block>Block</button>
+    <button ion-button raised block class="activated">Block.activated</button>
   </p>
 
   <p>
-    <ion-button raised clear disabled>Clear Disabled</ion-button>
+    <button ion-button raised clear disabled>Clear Disabled</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/round/app/app.module.ts b/src/components/button/test/round/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/round/app/app.module.ts
+++ b/src/components/button/test/round/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/round/pages/page-one/page-one.html b/src/components/button/test/round/pages/page-one/page-one.html
index c5d4166d32..1f426ef0e8 100644
--- a/src/components/button/test/round/pages/page-one/page-one.html
+++ b/src/components/button/test/round/pages/page-one/page-one.html
@@ -9,17 +9,17 @@
 
 <ion-content padding>
 
-  <ion-button round>button</ion-button>
-  <ion-button round color="light">button light</ion-button>
-  <ion-button round color="secondary">button secondary</ion-button>
-  <ion-button round color="danger">button danger</ion-button>
-  <ion-button round color="dark">button dark</ion-button>
+  <button ion-button round>button</button>
+  <button ion-button round color="light">button light</button>
+  <button ion-button round color="secondary">button secondary</button>
+  <button ion-button round color="danger">button danger</button>
+  <button ion-button round color="dark">button dark</button>
 
-  <ion-button round outline>button</ion-button>
-  <ion-button round color="light" outline>button light</ion-button>
-  <ion-button round color="secondary" outline>button secondary</ion-button>
-  <ion-button round color="danger" outline>button danger</ion-button>
-  <ion-button round color="dark" outline>button dark</ion-button>
+  <button ion-button round outline>button</button>
+  <button ion-button round color="light" outline>button light</button>
+  <button ion-button round color="secondary" outline>button secondary</button>
+  <button ion-button round color="danger" outline>button danger</button>
+  <button ion-button round color="dark" outline>button dark</button>
 
 </ion-content>
 
diff --git a/src/components/button/test/round/pages/page-one/page-one.module.ts b/src/components/button/test/round/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/round/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/round/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/sizes/app/app.module.ts b/src/components/button/test/sizes/app/app.module.ts
index 37e039e3e6..472cd840ec 100644
--- a/src/components/button/test/sizes/app/app.module.ts
+++ b/src/components/button/test/sizes/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,7 +14,6 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [IonicApp]
 })
 export class AppModule {}
diff --git a/src/components/button/test/sizes/pages/page-one/page-one.html b/src/components/button/test/sizes/pages/page-one/page-one.html
index 635818df50..040754c000 100644
--- a/src/components/button/test/sizes/pages/page-one/page-one.html
+++ b/src/components/button/test/sizes/pages/page-one/page-one.html
@@ -11,26 +11,26 @@
 
   <p>
     <a ion-button href="#">a[ion-button]</a>
-    <ion-button>button</ion-button>
+    <button ion-button>button</button>
   </p>
 
   <p>
     <a ion-button small href="#">a[ion-button][small]</a>
-    <ion-button small>button[ion-button][small]</ion-button>
+    <button ion-button small>button[ion-button][small]</button>
   </p>
 
   <p>
     <a ion-button outline small href="#">a[ion-button][outline][small]</a>
-    <ion-button outline small>button[ion-button][outline][small]</ion-button>
+    <button ion-button outline small>button[ion-button][outline][small]</button>
   </p>
 
   <p>
     <a ion-button clear small href="#">a[ion-button][clear][small]</a>
-    <ion-button clear small>button[ion-button][clear][small]</ion-button>
+    <button ion-button clear small>button[ion-button][clear][small]</button>
   </p>
 
   <p>
-    <ion-button large>[large]</ion-button>
+    <button ion-button large>[large]</button>
     <a ion-button large href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
@@ -41,12 +41,12 @@
 
   <p>
     <a ion-button outline large href="#">a[ion-button][outline][large]</a>
-    <ion-button outline large>button[ion-button][outline][large]</ion-button>
+    <button ion-button outline large>button[ion-button][outline][large]</button>
   </p>
 
   <p>
     <a ion-button clear large href="#">a[clear][large]</a>
-    <ion-button clear large>button[ion-button][clear][large]</ion-button>
+    <button ion-button clear large>button[ion-button][clear][large]</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/sizes/pages/page-one/page-one.module.ts b/src/components/button/test/sizes/pages/page-one/page-one.module.ts
index ce4ba72e2f..8b48a5850d 100644
--- a/src/components/button/test/sizes/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/sizes/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,7 +12,6 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/toolbar-button.scss b/src/components/button/toolbar-button.scss
deleted file mode 100644
index b134731fe0..0000000000
--- a/src/components/button/toolbar-button.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@import "../../themes/ionic.globals";
-
-// Toolbar Buttons
-// --------------------------------------------------
-
-.bar-button {
-  @include text-align(center);
-  @include appearance(none);
-
-  border: 0;
-  position: relative;
-  display: inline-block;
-
-  margin: 0;
-  padding: 0;
-
-  line-height: 1;
-  text-overflow: ellipsis;
-  text-transform: none;
-  white-space: nowrap;
-
-  cursor: pointer;
-
-  vertical-align: top; // the better option for most scenarios
-  vertical-align: -webkit-baseline-middle; // the best for those that support it
-
-  user-select: none;
-}
-
-.bar-button::after {
-  // used to make the button's hit area larger
-  position: absolute;
-  top: -7px;
-  right: -2px;
-  bottom: -6px;
-  left: -2px;
-
-  content: "";
-}
-
-
-// Menu Toggle
-// --------------------------------------------------
-
-.bar-button-menutoggle {
-  display: flex;
-
-  align-items: center;
-}
-
-
-// Back Button
-// --------------------------------------------------
-
-.back-button {
-  display: none;
-}
-
-.back-button.show-back-button {
-  display: inline-block;
-}
-
-.back-button-text {
-  display: flex;
-
-  align-items: center;
-}
diff --git a/src/components/segment/test/swipe/app/app.component.ts b/src/components/segment/test/swipe/app/app.component.ts
new file mode 100644
index 0000000000..8288e69b09
--- /dev/null
+++ b/src/components/segment/test/swipe/app/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import {E2EPage} from '../pages/e2e-page/e2e-page';
+@Component({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+export class AppComponent {
+  root = E2EPage;
+}
diff --git a/src/components/segment/test/swipe/app/app.module.ts b/src/components/segment/test/swipe/app/app.module.ts
new file mode 100644
index 0000000000..93848bbc29
--- /dev/null
+++ b/src/components/segment/test/swipe/app/app.module.ts
@@ -0,0 +1,22 @@
+import {  NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import {AppComponent} from './app.component';
+import {E2EPage} from '../pages/e2e-page/e2e-page';
+@NgModule({
+  declarations: [
+    AppComponent,
+    E2EPage
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    AppComponent,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/segment/test/swipe/app/main.ts b/src/components/segment/test/swipe/app/main.ts
new file mode 100644
index 0000000000..6af7a5b2ae
--- /dev/null
+++ b/src/components/segment/test/swipe/app/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/src/components/segment/test/swipe/pages/e2e-page/e2e-page.ts b/src/components/segment/test/swipe/pages/e2e-page/e2e-page.ts
index f7c8f705fa..3885d0c960 100644
--- a/src/components/segment/test/swipe/pages/e2e-page/e2e-page.ts
+++ b/src/components/segment/test/swipe/pages/e2e-page/e2e-page.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { SegmentButton } from '../../../../../..';
 
 
@@ -6,36 +6,39 @@ import { SegmentButton } from '../../../../../..';
   templateUrl: 'main.html',
 })
 export class E2EPage {
+  // @ViewChild('loopSlider') sliderComponent: Slides;
 
-  selectedSegment = 'first';
-  slides = [
-    {
-      id: 'first',
-      title: 'First Slide'
-    },
-    {
-      id: 'second',
-      title: 'Second Slide'
-    },
-    {
-      id: 'third',
-      title: 'Third Slide'
-    }
-  ];
+  // selectedSegment = 'first';
+  // slides = [
+  //   {
+  //     id: 'first',
+  //     title: 'First Slide'
+  //   },
+  //   {
+  //     id: 'second',
+  //     title: 'Second Slide'
+  //   },
+  //   {
+  //     id: 'third',
+  //     title: 'Third Slide'
+  //   }
+  // ];
 
-  constructor() {}
+  // constructor() {}
 
-  onSegmentChanged(segmentButton: SegmentButton) {
-    console.log('Segment changed to', segmentButton.value);
+  // onSegmentChanged(segmentButton: SegmentButton) {
+  //   console.log('Segment changed to', segmentButton.value);
 
-    // const selectedIndex = this.slides.findIndex((slide) => {
-    //   return slide.id === segmentButton.value;
-    // });
-    // this.sliderComponent.slideTo(selectedIndex);
-  }
+  //   const selectedIndex = this.slides.findIndex((slide) => {
+  //     return slide.id === segmentButton.value;
+  //   });
+  //   this.sliderComponent.slideTo(selectedIndex);
+  // }
 
-  onSlideChanged() {
-    // const currentSlide = this.slides[s.getActiveIndex()];
-    // this.selectedSegment = currentSlide.id;
-  }
+  // onSlideChanged(s: Slides) {
+  //   console.log('Slide changed', s);
+
+  //   const currentSlide = this.slides[s.getActiveIndex()];
+  //   this.selectedSegment = currentSlide.id;
+  // }
 }
diff --git a/src/components/segment/test/swipe/pages/e2e-page/main.html b/src/components/segment/test/swipe/pages/e2e-page/main.html
new file mode 100644
index 0000000000..f6ef86c23e
--- /dev/null
+++ b/src/components/segment/test/swipe/pages/e2e-page/main.html
@@ -0,0 +1,42 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>
+      Segment Swipeable under Navbar
+    </ion-title>
+  </ion-navbar>
+
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
+      <ion-segment-button value="first">
+        First
+      </ion-segment-button>
+      <ion-segment-button value="second">
+        Second
+      </ion-segment-button>
+      <ion-segment-button value="third">
+        Third
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-slides (ionSlideDidChange)="onSlideChanged($event)" #loopSlider>
+    <ion-slide *ngFor="let slide of slides">
+      <h1>{{ slide.title }}</h1>
+    </ion-slide>
+  </ion-slides>
+
+</ion-content>
+
+
+<style>
+  ion-scroll {
+    width: 100%;
+    height: 100%;
+  }
+</style>