diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 8b72084499..7f7d53bf1c 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -9,10 +9,6 @@ $button-round-padding:            0 2.6rem !default;
 /// @prop - Border radius of the round button
 $button-round-border-radius:      64px !default;
 
-:host {
-  visibility: inherit !important;
-}
-
 
 .button {
   @include text-align(center);
@@ -39,6 +35,10 @@ $button-round-border-radius:      64px !default;
   contain: content;
 }
 
+ion-button.upgraded {
+  visibility: inherit;
+}
+
 .button-inner {
   display: flex;
 
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 9dc01a0e93..8afcfe2f23 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -67,10 +67,12 @@ type CssClassObject = { [className: string]: boolean };
     ios: 'button.ios.scss',
     md: 'button.md.scss',
     wp: 'button.wp.scss'
-  }
+  },
+  shadow: false
 })
 export class Button {
 
+  @Prop() href: string;
 
   /**
    * @Prop {boolean} If true, activates the large button size.
@@ -197,41 +199,40 @@ export class Button {
         '-' + style.toLowerCase() :
         '');
 
-    return [].concat(
-        `${className}-${mode}`,
+    return [`${className}-${mode}`].concat(
         color ? `${className}-${mode}-${color}` : []
       );
   }
 
   getStyleClassList(buttonType: string): string[] {
-    var classList = [].concat(
+    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) : []
     );
 
     if (classList.length === 0) {
-      classList = [this.getColorClassList(this.color, buttonType, 'default', this.mode)];
+      classList = this.getColorClassList(this.color, buttonType, 'default', this.mode);
     }
 
     return classList;
   }
 
   render() {
-    var size =
+    const size =
       (this.large ? 'large' : null) ||
       (this.small ? 'small' : null) ||
       (this.default ? 'default' : null);
 
-    var shape = (this.round ? 'round' : null);
+    const shape = (this.round ? 'round' : null);
 
-    var display =
+    const display =
       (this.block ? 'block' : null) ||
       (this.full ? 'full' : null);
 
-    var decorator = (this.strong ? 'strong' : null);
+    const decorator = (this.strong ? 'strong' : null);
 
-    var buttonClasses: CssClassObject = []
+    const buttonClasses: CssClassObject = []
       .concat(
         this.getElementClassList(this.buttonType, this.mode),
         this.getClassList(this.buttonType, shape, this.mode),
@@ -245,8 +246,10 @@ export class Button {
         return prevValue;
       }, {});
 
+    const tagType = this.href ? 'a' : 'button';
+
     return h(this,
-      h('button', {
+      h(tagType, {
         class: buttonClasses,
         props: {
           disabled: this.disabled