diff --git a/core/api.txt b/core/api.txt
index e9c4c71ad3..2f6d0387b1 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -89,8 +89,12 @@ ion-back-button,prop,icon,null | string | undefined,undefined,false,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
 ion-back-button,css-prop,--background
+ion-back-button,css-prop,--background-focused
+ion-back-button,css-prop,--background-hover
 ion-back-button,css-prop,--border-radius
 ion-back-button,css-prop,--color
+ion-back-button,css-prop,--color-focused
+ion-back-button,css-prop,--color-hover
 ion-back-button,css-prop,--icon-font-size
 ion-back-button,css-prop,--icon-font-weight
 ion-back-button,css-prop,--icon-margin-bottom
diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index 28328b0334..ac383fb9fb 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -5,26 +5,13 @@
 // --------------------------------------------------
 
 :host {
+  --background-focused: #{ion-color(primary, base, .1)};
+  --border-radius: 10px;
   --color: #{$back-button-ios-color};
-  --margin-top: 0;
-  --margin-end: 0;
-  --margin-bottom: 0;
-  --margin-start: 0;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --min-height: 32px;
-  --min-width: auto;
-  --icon-padding-top: 0;
-  --icon-padding-end: 0;
-  --icon-padding-bottom: 0;
-  --icon-padding-start: 0;
-  --icon-margin-top: 0;
   --icon-margin-end: -5px;
-  --icon-margin-bottom: 0;
   --icon-margin-start: -4px;
   --icon-font-size: 1.85em;
+  --min-height: 32px;
 
   font-size: 17px;
 }
@@ -41,4 +28,19 @@
 
 :host(.activated) .button-native {
   opacity: .4;
-}
\ No newline at end of file
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --opacity: #{$button-ios-clear-opacity-hover};
+  }
+}
+
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  background: #{current-color(base, .1)};
+}
diff --git a/core/src/components/back-button/back-button.ios.vars.scss b/core/src/components/back-button/back-button.ios.vars.scss
index 8793d741f2..02fb7648f3 100644
--- a/core/src/components/back-button/back-button.ios.vars.scss
+++ b/core/src/components/back-button/back-button.ios.vars.scss
@@ -1,5 +1,9 @@
 @import "../../themes/ionic.globals.ios";
 
+// TODO this is needed for the ios vars to import
+@import "../button/button.vars";
+@import "../button/button.ios.vars";
+
 // iOS Back Button
 // --------------------------------------------------
 
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 6e1adbde25..47bf84cb5e 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -5,27 +5,18 @@
 // --------------------------------------------------
 
 :host {
+  --border-radius: 4px;
+  --background-focused: rgba(66, 66, 66, 0.24);
+  --background-hover: rgba(66, 66, 66, 0.08);
   --color: #{$back-button-md-color};
-  --margin-top: 0;
-  --margin-end: 0;
-  --margin-bottom: 0;
-  --margin-start: 0;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --min-height: 32px;
-  --min-width: 44px;
-  --icon-padding-top: 0;
-  --icon-padding-end: 0;
-  --icon-padding-start: 0;
-  --icon-padding-bottom: 0;
-  --icon-margin-top: 0;
   --icon-margin-end: 0;
-  --icon-margin-bottom: 0;
   --icon-margin-start: 0;
   --icon-font-size: 24px;
   --icon-font-weight: normal;
+  --min-height: 32px;
+  --min-width: 44px;
+  --padding-start: 12px;
+  --padding-end: 12px;
 
   font-size: 14px;
   font-weight: 500;
@@ -33,15 +24,41 @@
   text-transform: uppercase;
 }
 
-.button-native {
-  width: 48px;
-  height: 48px;
+:host(.back-button-has-icon-only) {
+  --border-radius: 50%;
 
+  min-width: 48px;
+  height: 48px;
+}
+
+.button-native {
   box-shadow: none;
 }
 
+.button-text {
+  @include padding(0, 4px);
+}
+
 ion-icon {
   line-height: .67;
 
   text-align: start;
 }
+
+
+// Back Button Color: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    background: #{current-color(base, .08)};
+  }
+}
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  background: #{current-color(base, .24)};
+}
diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index 2c1ca5c920..c9f7d0e001 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -6,8 +6,12 @@
 :host {
  /**
    * @prop --background: Background of the button
+   * @prop --background-focused: Background of the button when focused
+   * @prop --background-hover: Background of the button when hover
    *
    * @prop --color: Text color of the button
+   * @prop --color-focused: Text color of the button when focused
+   * @prop --color-hover: Text color of the button when hover
    *
    * @prop --min-width: Minimum width of the button
    * @prop --min-height: Minimum height of the button
@@ -44,12 +48,33 @@
    * @prop --icon-font-weight: Font weight of the button icon
    */
   --background: transparent;
+  --color-focused: var(--color);
+  --color-hover: var(--color);
+  --icon-margin-top: 0;
+  --icon-margin-bottom: 0;
+  --icon-padding-top: 0;
+  --icon-padding-end: 0;
+  --icon-padding-bottom: 0;
+  --icon-padding-start: 0;
+  --margin-top: 0;
+  --margin-end: 0;
+  --margin-bottom: 0;
+  --margin-start: 0;
+  --min-width: auto;
+  --min-height: auto;
+  --padding-top: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --opacity: 1;
   --ripple-color: currentColor;
   --transition: background-color, opacity 100ms linear;
-  --opacity: 1;
 
   display: none;
 
+  min-width: var(--min-width);
+  min-height: var(--min-height);
+
   color: var(--color);
 
   font-family: $font-family-base;
@@ -96,8 +121,10 @@
   display: block;
   position: relative;
 
-  min-width: var(--min-width);
-  min-height: var(--min-height);
+  width: 100%;
+  height: 100%;
+
+  min-height: inherit;
 
   transition: var(--transition);
 
@@ -145,6 +172,44 @@ ion-icon {
   pointer-events: none;
 }
 
+
+// Back Button: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    background: var(--background-hover);
+    color: var(--color-hover);
+  }
+}
+
+// Back Button: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  background: var(--background-focused);
+  color: var(--color-focused);
+}
+
+
+// Back Button Color: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    color: #{current-color(base)};
+  }
+}
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  color: #{current-color(base)};
+}
+
+
 // Back Button in Toolbar: Global Theming
 // --------------------------------------------------
 
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 704497c598..b56484702b 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -56,6 +56,29 @@ export class BackButton implements ComponentInterface {
     return openURL(this.win, this.defaultHref, ev, 'back');
   }
 
+  private get backButtonIcon() {
+    return this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
+  }
+
+  private get backButtonText() {
+    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
+    return this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
+  }
+
+  private get hasIconOnly() {
+    return this.backButtonIcon && !this.backButtonText;
+  }
+
+  private get rippleType() {
+    // If the button only has an icon we use the unbounded
+    // "circular" ripple effect
+    if (this.hasIconOnly) {
+      return 'unbounded';
+    }
+
+    return 'bounded';
+  }
+
   hostData() {
     const showBackButton = this.defaultHref !== undefined;
 
@@ -65,16 +88,16 @@ export class BackButton implements ComponentInterface {
         [`${this.mode}`]: true,
 
         'button': true, // ion-buttons target .button
+        'back-button-has-icon-only': this.hasIconOnly,
         'ion-activatable': true,
+        'ion-focusable': true,
         'show-back-button': showBackButton
       }
     };
   }
 
   render() {
-    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
-    const backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
-    const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
+    const { backButtonIcon, backButtonText } = this;
 
     return (
       <button type="button" class="button-native">
@@ -82,7 +105,7 @@ export class BackButton implements ComponentInterface {
           {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
           {backButtonText && <span class="button-text">{backButtonText}</span>}
         </span>
-        {this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
+        {this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
       </button>
     );
   }
diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md
index ee7a3808ac..397664520b 100644
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -250,34 +250,38 @@ export default Example;
 
 ## CSS Custom Properties
 
-| Name                    | Description                       |
-| ----------------------- | --------------------------------- |
-| `--background`          | Background of the button          |
-| `--border-radius`       | Border radius of the button       |
-| `--color`               | Text color of the button          |
-| `--icon-font-size`      | Font size of the button icon      |
-| `--icon-font-weight`    | Font weight of the button icon    |
-| `--icon-margin-bottom`  | Margin bottom of the button icon  |
-| `--icon-margin-end`     | Margin end of the button icon     |
-| `--icon-margin-start`   | Margin start of the button icon   |
-| `--icon-margin-top`     | Margin top of the button icon     |
-| `--icon-padding-bottom` | Padding bottom of the button icon |
-| `--icon-padding-end`    | Padding end of the button icon    |
-| `--icon-padding-start`  | Padding start of the button icon  |
-| `--icon-padding-top`    | Padding top of the button icon    |
-| `--margin-bottom`       | Margin bottom of the button       |
-| `--margin-end`          | Margin end of the button          |
-| `--margin-start`        | Margin start of the button        |
-| `--margin-top`          | Margin top of the button          |
-| `--min-height`          | Minimum height of the button      |
-| `--min-width`           | Minimum width of the button       |
-| `--opacity`             | Opacity of the button             |
-| `--padding-bottom`      | Padding bottom of the button      |
-| `--padding-end`         | Padding end of the button         |
-| `--padding-start`       | Padding start of the button       |
-| `--padding-top`         | Padding top of the button         |
-| `--ripple-color`        | Color of the button ripple effect |
-| `--transition`          | Transition of the button          |
+| Name                    | Description                           |
+| ----------------------- | ------------------------------------- |
+| `--background`          | Background of the button              |
+| `--background-focused`  | Background of the button when focused |
+| `--background-hover`    | Background of the button when hover   |
+| `--border-radius`       | Border radius of the button           |
+| `--color`               | Text color of the button              |
+| `--color-focused`       | Text color of the button when focused |
+| `--color-hover`         | Text color of the button when hover   |
+| `--icon-font-size`      | Font size of the button icon          |
+| `--icon-font-weight`    | Font weight of the button icon        |
+| `--icon-margin-bottom`  | Margin bottom of the button icon      |
+| `--icon-margin-end`     | Margin end of the button icon         |
+| `--icon-margin-start`   | Margin start of the button icon       |
+| `--icon-margin-top`     | Margin top of the button icon         |
+| `--icon-padding-bottom` | Padding bottom of the button icon     |
+| `--icon-padding-end`    | Padding end of the button icon        |
+| `--icon-padding-start`  | Padding start of the button icon      |
+| `--icon-padding-top`    | Padding top of the button icon        |
+| `--margin-bottom`       | Margin bottom of the button           |
+| `--margin-end`          | Margin end of the button              |
+| `--margin-start`        | Margin start of the button            |
+| `--margin-top`          | Margin top of the button              |
+| `--min-height`          | Minimum height of the button          |
+| `--min-width`           | Minimum width of the button           |
+| `--opacity`             | Opacity of the button                 |
+| `--padding-bottom`      | Padding bottom of the button          |
+| `--padding-end`         | Padding end of the button             |
+| `--padding-start`       | Padding start of the button           |
+| `--padding-top`         | Padding top of the button             |
+| `--ripple-color`        | Color of the button ripple effect     |
+| `--transition`          | Transition of the button              |
 
 
 ----------------------------------------------
diff --git a/core/src/components/back-button/test/basic/e2e.ts b/core/src/components/back-button/test/basic/e2e.ts
new file mode 100644
index 0000000000..5b813c6da8
--- /dev/null
+++ b/core/src/components/back-button/test/basic/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('back-button: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/back-button/test/basic?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/back-button/test/basic/index.html b/core/src/components/back-button/test/basic/index.html
index b8b671b063..a41ef7d711 100644
--- a/core/src/components/back-button/test/basic/index.html
+++ b/core/src/components/back-button/test/basic/index.html
@@ -3,129 +3,144 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Back Button</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Back Button - Basic</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script src="../../../../../dist/ionic.js"></script>
 </head>
 
-<body onload="loadFirstPage()">
+<body>
   <ion-app>
-    <ion-nav></ion-nav>
+    <ion-content>
+      <h3>Default</h3>
+      <p>
+        <ion-back-button></ion-back-button>
+        <ion-back-button text="Back"></ion-back-button>
+        <ion-back-button icon="add"></ion-back-button>
+        <ion-back-button text="Text Only" icon=""></ion-back-button>
+        <ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
+      </p>
+      <p>
+        <ion-back-button class="ion-focused"></ion-back-button>
+        <ion-back-button class="ion-focused" text="Back"></ion-back-button>
+        <ion-back-button class="ion-focused" icon="add"></ion-back-button>
+        <ion-back-button class="ion-focused" text="Text Only" icon=""></ion-back-button>
+        <ion-back-button class="ion-focused" icon="heart" text="Love" color="danger"></ion-back-button>
+      </p>
+
+      <h3>Colors</h3>
+      <p>
+        <ion-back-button color="primary"></ion-back-button>
+        <ion-back-button color="secondary"></ion-back-button>
+        <ion-back-button color="tertiary"></ion-back-button>
+        <ion-back-button color="success"></ion-back-button>
+        <ion-back-button color="warning"></ion-back-button>
+        <ion-back-button color="danger"></ion-back-button>
+        <ion-back-button color="light"></ion-back-button>
+        <ion-back-button color="medium"></ion-back-button>
+        <ion-back-button color="dark"></ion-back-button>
+      </p>
+      <p>
+        <ion-back-button color="primary" class="ion-focused"></ion-back-button>
+        <ion-back-button color="secondary" class="ion-focused"></ion-back-button>
+        <ion-back-button color="tertiary" class="ion-focused"></ion-back-button>
+        <ion-back-button color="success" class="ion-focused"></ion-back-button>
+        <ion-back-button color="warning" class="ion-focused"></ion-back-button>
+        <ion-back-button color="danger" class="ion-focused"></ion-back-button>
+        <ion-back-button color="light" class="ion-focused"></ion-back-button>
+        <ion-back-button color="medium" class="ion-focused"></ion-back-button>
+        <ion-back-button color="dark" class="ion-focused"></ion-back-button>
+      </p>
+
+      <h3>Custom</h3>
+
+      <!-- Custom Font -->
+      <p>
+        <ion-back-button class="wide" text="wide"></ion-back-button>
+        <ion-back-button class="large" text="large"></ion-back-button>
+        <ion-back-button class="round" text="round"></ion-back-button>
+        <ion-back-button class="small"></ion-back-button>
+      </p>
+      <p>
+        <ion-back-button class="wide ion-focused" text="wide"></ion-back-button>
+        <ion-back-button class="large ion-focused" text="large"></ion-back-button>
+        <ion-back-button class="round ion-focused" text="round"></ion-back-button>
+        <ion-back-button class="small ion-focused"></ion-back-button>
+      </p>
+
+      <!-- Custom Colors -->
+      <p>
+        <ion-back-button class="custom"></ion-back-button>
+        <ion-back-button color="secondary" class="custom"></ion-back-button>
+      </p>
+
+      <p>
+        <ion-back-button class="custom ion-focused"></ion-back-button>
+        <ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
+      </p>
+    </ion-content>
   </ion-app>
+
+  <script>
+    var buttons = document.querySelectorAll('ion-back-button');
+
+    for(var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', (event) => onClick(event));
+    }
+
+    function onClick(ev) {
+      console.log("clicked the button", ev.target.innerText);
+    }
+  </script>
+
+  <style>
+    h3 {
+      padding-left: 16px;
+    }
+
+    p {
+      padding-left: 8px;
+    }
+
+    ion-back-button {
+      display: inline-block !important;
+      vertical-align: middle;
+    }
+
+    .wide {
+      --background: #d1f3ff;
+      --background-hover: #add8e6;
+      --background-focused: #84c5db;
+
+      height: 50px;
+      width: 150px;
+    }
+
+    .large {
+      --icon-font-size: 32px;
+
+      font-size: 32px;
+      text-transform: capitalize;
+    }
+
+    .small {
+      --icon-font-size: 15px;
+    }
+
+    .custom {
+      --background: #ffdde2;
+      --background-hover: #fcc6ce;
+      --background-focused: lightpink;
+      --color: rgb(214, 60, 235);
+      --border-radius: 10px;
+      --padding-start: 10px;
+      --padding-end: 10px;
+    }
+
+  </style>
 </body>
 
-<script>
-
-  async function loadFirstPage() {
-    const nav = document.querySelector('ion-nav');
-    await nav.componentOnReady();
-    const firstPage = document.createElement('div');
-    firstPage.classList.add('first-page');
-    firstPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page One</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page One</h1>
-        <ion-button class="next">Go to Page Two</ion-button>
-      </ion-content>
-    `;
-
-    await nav.setRoot(firstPage);
-
-    // okay cool, we're in the DOM now
-    const button = firstPage.querySelector('.next');
-    button.addEventListener('click', async () => {
-      await goToPageTwo(nav);
-    });
-  }
-
-  async function goToPageTwo(nav) {
-    const secondPage = document.createElement('div');
-    secondPage.classList.add('second-page');
-    secondPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar color="secondary">
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Two</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Two</h1>
-        <p>Just an empty <code>ion-back-button</code></p>
-        <ion-button class="next">Go to Page Three</ion-button>
-      </ion-content>
-    `;
-
-    // okay cool, we're in the DOM now
-    await nav.push(secondPage);
-
-    const nextButton = secondPage.querySelector('ion-button.next');
-    nextButton.addEventListener('click', async () => {
-      await goToPageThree(nav);
-    });
-  }
-
-  async function goToPageThree(nav) {
-    const thirdPage = document.createElement('div');
-    thirdPage.classList.add('third-page');
-    thirdPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Three</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Three</h1>
-        <p>Custom back button</p>
-        <ion-button class="next">Go to Page Four</ion-button>
-      </ion-content>
-    `;
-
-    // okay cool, we're in the DOM now
-    await nav.push(thirdPage);
-
-    const nextButton = thirdPage.querySelector('ion-button.next');
-    nextButton.addEventListener('click', async () => {
-      await goToPageFour(nav);
-    });
-  }
-
-  async function goToPageFour(nav) {
-    const fourthPage = document.createElement('div');
-    fourthPage.classList.add('fourth-page');
-    fourthPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-back-button color="danger"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Four</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Four</h1>
-        <p>Back button and menu button</p>
-      </ion-content>
-    `;
-
-    // okay cool, we're in the DOM now
-    await nav.push(fourthPage);
-  }
-</script>
-
 </html>
diff --git a/core/src/components/back-button/test/navigation/index.html b/core/src/components/back-button/test/navigation/index.html
new file mode 100644
index 0000000000..dd91303014
--- /dev/null
+++ b/core/src/components/back-button/test/navigation/index.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Back Button - Navigation</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body onload="loadFirstPage()">
+  <ion-app>
+    <ion-nav></ion-nav>
+  </ion-app>
+</body>
+
+<script>
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    const firstPage = document.createElement('div');
+    firstPage.classList.add('first-page');
+    firstPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page One</h1>
+        <ion-button class="next">Go to Page Two</ion-button>
+      </ion-content>
+    `;
+
+    await nav.setRoot(firstPage);
+
+    // okay cool, we're in the DOM now
+    const button = firstPage.querySelector('.next');
+    button.addEventListener('click', async () => {
+      await goToPageTwo(nav);
+    });
+  }
+
+  async function goToPageTwo(nav) {
+    const secondPage = document.createElement('div');
+    secondPage.classList.add('second-page');
+    secondPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Two</h1>
+        <p>Just an empty <code>ion-back-button</code></p>
+        <ion-button class="next">Go to Page Three</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(secondPage);
+
+    const nextButton = secondPage.querySelector('ion-button.next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageThree(nav);
+    });
+  }
+
+  async function goToPageThree(nav) {
+    const thirdPage = document.createElement('div');
+    thirdPage.classList.add('third-page');
+    thirdPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Three</h1>
+        <p>Custom back button</p>
+        <ion-button class="next">Go to Page Four</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(thirdPage);
+
+    const nextButton = thirdPage.querySelector('ion-button.next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageFour(nav);
+    });
+  }
+
+  async function goToPageFour(nav) {
+    const fourthPage = document.createElement('div');
+    fourthPage.classList.add('fourth-page');
+    fourthPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+            <ion-back-button color="danger"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Four</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Four</h1>
+        <p>Back button and menu button</p>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(fourthPage);
+  }
+</script>
+
+</html>
diff --git a/core/src/components/back-button/test/standalone/e2e.ts b/core/src/components/back-button/test/standalone/e2e.ts
new file mode 100644
index 0000000000..93f1bdf46f
--- /dev/null
+++ b/core/src/components/back-button/test/standalone/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('back-button: standalone', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/back-button/test/standalone?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/back-button/test/standalone/index.html b/core/src/components/back-button/test/standalone/index.html
index 55fbc5eef1..b557645f6a 100644
--- a/core/src/components/back-button/test/standalone/index.html
+++ b/core/src/components/back-button/test/standalone/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Back Button</title>
+  <title>Back Button - Standalone</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/core.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
diff --git a/core/src/components/back-button/test/toolbar/e2e.ts b/core/src/components/back-button/test/toolbar/e2e.ts
new file mode 100644
index 0000000000..5b813c6da8
--- /dev/null
+++ b/core/src/components/back-button/test/toolbar/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('back-button: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/back-button/test/basic?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/back-button/test/toolbar/index.html b/core/src/components/back-button/test/toolbar/index.html
new file mode 100644
index 0000000000..ef01e9a2eb
--- /dev/null
+++ b/core/src/components/back-button/test/toolbar/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Back Button - Toolbar</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button class="custom"></ion-back-button>
+          <ion-back-button class="custom ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Custom</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button color="secondary"></ion-back-button>
+          <ion-back-button color="secondary" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Secondary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Light</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="danger">
+        <ion-buttons slot="start">
+          <ion-button>
+            <ion-icon name="star" slot="icon-only"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Danger</ion-title>
+        <ion-buttons slot="end">
+          <ion-back-button icon="star" text=""></ion-back-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar color="dark">
+        <ion-buttons slot="start">
+          <ion-back-button text="Back" icon=""></ion-back-button>
+          <ion-back-button text="Back" icon="" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Dark</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-back-button text=""></ion-back-button>
+          <ion-back-button text="" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Tertiary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+          <ion-back-button text="Back"></ion-back-button>
+          <ion-back-button text="Back" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Primary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="success">
+        <ion-buttons slot="start">
+          <ion-back-button text="undo" icon="paper"></ion-back-button>
+          <ion-back-button text="undo" icon="paper" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Success</ion-title>
+      </ion-toolbar>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    var buttons = document.querySelectorAll('ion-back-button');
+
+    for(var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', (event) => onClick(event));
+    }
+
+    function onClick(ev) {
+      console.log("clicked the button", ev.target.innerText);
+    }
+  </script>
+
+  <style>
+    ion-back-button {
+      display: inline-block !important;
+    }
+
+    .custom {
+      --background: #ffdde2;
+      --background-hover: #fcc6ce;
+      --background-focused: lightpink;
+      --color: rgb(214, 60, 235);
+      --border-radius: 10px;
+      --padding-start: 10px;
+      --padding-end: 10px;
+    }
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index ef5bcda76a..1f7bc23d0b 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -238,11 +238,6 @@
   border: 0;
 }
 
-
-// .button > .button-container:hover {
-//   opacity: var(--opacity-hover);
-// }
-
 .button-inner {
   display: flex;
 
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index c64b5209bc..e06ac95bcc 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -29,7 +29,8 @@
 :host-context(.ion-color)::slotted(*) .button {
   --color: initial;
   --border-color: initial;
-  --color-activated: initial;
+  --background-focused: #{current-color(contrast, .1)};
+
 }
 
 :host-context(.ion-color)::slotted(*) .button-solid {
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index 84f0f8521b..e104ea28af 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -29,8 +29,8 @@
 
 :host-context(.ion-color)::slotted(*) .button {
   --color: initial;
-  --color-activated: initial;
-  --color-focused: initial;
+  --color-focused: #{current-color(contrast)};
+  --color-hover: #{current-color(contrast)};
   --background-hover: #{current-color(contrast, .08)};
   --background-focused: #{current-color(contrast, .24)};
 }
@@ -39,8 +39,10 @@
   --background: #{current-color(contrast)};
   --background-activated: #{current-color(contrast)};
   --background-focused: #{current-color(contrast, .9)};
+  --background-hover: #{current-color(contrast, .92)};
   --color: #{current-color(base)};
   --color-focused: #{current-color(base)};
+  --color-hover: #{current-color(base)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-outline {
@@ -48,15 +50,6 @@
 }
 
 
-// Material Design Toolbar Default Button
-// --------------------------------------------------
-
-::slotted(*) .button {
-  --color-focused: #{$toolbar-md-color};
-  --background-focused: rgba(66, 66, 66, 0.1);
-}
-
-
 // Material Design Toolbar Icon Only Clear Button
 // --------------------------------------------------
 
@@ -74,16 +67,20 @@
 }
 
 
+::slotted(*) .button {
+  --background-hover: rgba(66, 66, 66, 0.08);
+}
+
 // Material Design Toolbar Solid Button
 // --------------------------------------------------
 
 ::slotted(*) .button-solid {
   --color: #{$toolbar-md-background};
   --color-activated: #{$toolbar-md-background};
-  --color-focused: #{$toolbar-md-background};
   --background: #{$toolbar-md-color};
   --background-activated: #{$toolbar-md-color};
   --background-focused: #{$toolbar-md-color-activated};
+  --background-hover: rgba(66, 66, 66, 0.92);
 }
 
 
@@ -106,8 +103,10 @@
 
 ::slotted(*) .button-clear {
   --color: initial;
+  --color-focused: #{$toolbar-md-color};
   --color-activated: currentColor;
   --background: transparent;
+  --background-focused: rgba(66, 66, 66, 0.1);
 }
 
 
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index 46de1679bc..bc1645a9f6 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/core/src/components/menu-button/menu-button.md.scss
@@ -32,7 +32,6 @@ ion-icon {
 // Menu Button Color: Focused
 // --------------------------------------------------
 
-
 :host(.ion-color.ion-focused) .button-native {
   background: #{current-color(base, .24)};
   color: #{current-color(base)};