diff --git a/core/api.txt b/core/api.txt
index cfb71efeec..0bde4504e9 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -398,73 +398,50 @@ ion-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
-ion-button,css-prop,--background,ionic
 ion-button,css-prop,--background,ios
 ion-button,css-prop,--background,md
-ion-button,css-prop,--background-activated,ionic
 ion-button,css-prop,--background-activated,ios
 ion-button,css-prop,--background-activated,md
-ion-button,css-prop,--background-activated-opacity,ionic
 ion-button,css-prop,--background-activated-opacity,ios
 ion-button,css-prop,--background-activated-opacity,md
-ion-button,css-prop,--background-focused,ionic
 ion-button,css-prop,--background-focused,ios
 ion-button,css-prop,--background-focused,md
-ion-button,css-prop,--background-focused-opacity,ionic
 ion-button,css-prop,--background-focused-opacity,ios
 ion-button,css-prop,--background-focused-opacity,md
-ion-button,css-prop,--background-hover,ionic
 ion-button,css-prop,--background-hover,ios
 ion-button,css-prop,--background-hover,md
-ion-button,css-prop,--background-hover-opacity,ionic
 ion-button,css-prop,--background-hover-opacity,ios
 ion-button,css-prop,--background-hover-opacity,md
-ion-button,css-prop,--border-color,ionic
 ion-button,css-prop,--border-color,ios
 ion-button,css-prop,--border-color,md
-ion-button,css-prop,--border-radius,ionic
 ion-button,css-prop,--border-radius,ios
 ion-button,css-prop,--border-radius,md
-ion-button,css-prop,--border-style,ionic
 ion-button,css-prop,--border-style,ios
 ion-button,css-prop,--border-style,md
-ion-button,css-prop,--border-width,ionic
 ion-button,css-prop,--border-width,ios
 ion-button,css-prop,--border-width,md
-ion-button,css-prop,--box-shadow,ionic
 ion-button,css-prop,--box-shadow,ios
 ion-button,css-prop,--box-shadow,md
-ion-button,css-prop,--color,ionic
 ion-button,css-prop,--color,ios
 ion-button,css-prop,--color,md
-ion-button,css-prop,--color-activated,ionic
 ion-button,css-prop,--color-activated,ios
 ion-button,css-prop,--color-activated,md
-ion-button,css-prop,--color-focused,ionic
 ion-button,css-prop,--color-focused,ios
 ion-button,css-prop,--color-focused,md
-ion-button,css-prop,--color-hover,ionic
 ion-button,css-prop,--color-hover,ios
 ion-button,css-prop,--color-hover,md
-ion-button,css-prop,--opacity,ionic
 ion-button,css-prop,--opacity,ios
 ion-button,css-prop,--opacity,md
-ion-button,css-prop,--padding-bottom,ionic
 ion-button,css-prop,--padding-bottom,ios
 ion-button,css-prop,--padding-bottom,md
-ion-button,css-prop,--padding-end,ionic
 ion-button,css-prop,--padding-end,ios
 ion-button,css-prop,--padding-end,md
-ion-button,css-prop,--padding-start,ionic
 ion-button,css-prop,--padding-start,ios
 ion-button,css-prop,--padding-start,md
-ion-button,css-prop,--padding-top,ionic
 ion-button,css-prop,--padding-top,ios
 ion-button,css-prop,--padding-top,md
-ion-button,css-prop,--ripple-color,ionic
 ion-button,css-prop,--ripple-color,ios
 ion-button,css-prop,--ripple-color,md
-ion-button,css-prop,--transition,ionic
 ion-button,css-prop,--transition,ios
 ion-button,css-prop,--transition,md
 ion-button,part,native
diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index 21a5cd4f85..5b28def0f5 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -1,32 +1,55 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./button";
-@import "./button.ionic.vars";
 
 // Ionic Button
 // -------------------------------------------------------------------------------
-
 :host {
+  --overflow: hidden;
+  --border-width: initial;
+  --border-color: initial;
+  --border-style: initial;
+  --color-activated: var(--color);
+  --color-focused: var(--color);
+  --color-hover: var(--color);
+  --box-shadow: none;
   --padding-bottom: var(--padding-top);
-  --padding-end: #{$button-ionic-padding-end};
+  --padding-end: #{globals.$ionic-space-400};
   --padding-start: var(--padding-end);
-  --padding-top: #{$button-ionic-padding-top};
-  // TODO(FW-6187): set this to a design token when it is added
-  --focus-ring-color: #9ec4fd;
-  --focus-ring-width: 2px;
+  --padding-top: #{globals.$ionic-space-300};
+  --focus-ring-color: #{globals.$ionic-state-focus-1};
+  --focus-ring-width: #{globals.$ionic-border-size-050};
+
+  display: inline-block;
 
   position: relative;
 
-  min-height: #{$button-ionic-min-height};
+  width: auto;
 
-  font-size: #{$button-ionic-font-size};
+  min-height: globals.$ionic-scale-1000;
+
+  color: var(--color);
+
+  font-family: globals.$ionic-font-family;
+
+  font-size: globals.$ionic-font-size-350;
+
+  text-align: center;
+  text-decoration: none;
+
+  white-space: normal;
+
+  user-select: none;
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  font-kerning: none;
 
   // Target area
   &::after {
-    @include position(50%, 0, null, 0);
+    @include globals.position(50%, 0, null, 0);
     position: absolute;
 
     height: 100%;
-    min-height: px-to-rem(48);
+    min-height: globals.$ionic-scale-1200;
 
     transform: translateY(-50%);
 
@@ -38,11 +61,11 @@
   }
 
   ::slotted(ion-icon[slot="start"]) {
-    @include margin-horizontal(null, px-to-rem(8));
+    @include globals.margin-horizontal(null, globals.$ionic-space-200);
   }
 
   ::slotted(ion-icon[slot="end"]) {
-    @include margin-horizontal(px-to-rem(8), null);
+    @include globals.margin-horizontal(globals.$ionic-space-200, null);
   }
 }
 
@@ -53,52 +76,52 @@
 :host(.button-xsmall),
 :host(.button-small) {
   ::slotted(ion-icon[slot="start"]) {
-    @include margin-horizontal(null, px-to-rem(4));
+    @include globals.margin-horizontal(null, globals.$ionic-space-100);
   }
 
   ::slotted(ion-icon[slot="end"]) {
-    @include margin-horizontal(px-to-rem(4), null);
+    @include globals.margin-horizontal(globals.$ionic-space-100, null);
   }
 }
 
 /* Extra Small Button */
 :host(.button-xsmall) {
-  --padding-top: #{$button-ionic-xsmall-padding-top};
-  --padding-end: #{$button-ionic-xsmall-padding-end};
+  --padding-top: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-300};
 
-  min-height: #{$button-ionic-xsmall-min-height};
+  min-height: globals.$ionic-space-600;
 
-  font-size: #{$button-ionic-xsmall-font-size};
+  font-size: globals.$ionic-font-size-300;
 }
 
 /* Small Button */
 :host(.button-small) {
-  --padding-top: #{$button-ionic-small-padding-top};
-  --padding-end: #{$button-ionic-small-padding-end};
+  --padding-top: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-400};
 
-  min-height: #{$button-ionic-small-min-height};
+  min-height: #{globals.$ionic-scale-800};
 
-  font-size: #{$button-ionic-small-font-size};
+  font-size: #{globals.$ionic-font-size-300};
 }
 
 /* Large Button */
 :host(.button-large) {
-  --padding-top: #{$button-ionic-large-padding-top};
-  --padding-end: #{$button-ionic-large-padding-end};
+  --padding-top: #{globals.$ionic-space-400};
+  --padding-end: #{globals.$ionic-space-600};
 
-  min-height: #{$button-ionic-large-min-height};
+  min-height: #{globals.$ionic-scale-1200};
 
-  font-size: #{$button-ionic-large-font-size};
+  font-size: #{globals.$ionic-font-size-400};
 }
 
 /* Extra Large Button */
 :host(.button-xlarge) {
-  --padding-top: #{$button-ionic-xlarge-padding-top};
-  --padding-end: #{$button-ionic-xlarge-padding-end};
+  --padding-top: #{globals.$ionic-space-400};
+  --padding-end: #{globals.$ionic-space-800};
 
-  min-height: #{$button-ionic-xlarge-min-height};
+  min-height: #{globals.$ionic-scale-1400};
 
-  font-size: #{$button-ionic-xlarge-font-size};
+  font-size: #{globals.$ionic-font-size-500};
 }
 
 // Button with Icons
@@ -108,7 +131,7 @@
 ::slotted(ion-icon[slot="start"]),
 ::slotted(ion-icon[slot="end"]),
 ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: px-to-rem(16);
+  font-size: globals.$ionic-font-size-400;
 }
 
 :host(.button-xsmall),
@@ -118,7 +141,7 @@
   ::slotted(ion-icon[slot="start"]),
   ::slotted(ion-icon[slot="end"]),
   ::slotted(ion-icon[slot="icon-only"]) {
-    font-size: 1em;
+    font-size: inherit;
   }
 }
 
@@ -153,33 +176,33 @@
 
 // Only show the focus ring when the button is focused
 :host(.ion-focused) .button-native {
-  outline: var(--focus-ring-width) solid var(--focus-ring-color);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) globals.$ionic-border-style-solid var(--focus-ring-color);
+  outline-offset: globals.$ionic-border-size-050;
 }
 
 // Fill Solid Button
 // -------------------------------------------------------------------------------
 
 :host(.button-solid) {
-  --background-activated: #{ion-color(primary, shade)};
+  --background-activated: #{globals.$ionic-color-primary-base};
 }
 
-:host(.button-solid.ion-color.ion-activated) .button-native::after {
-  background: #{current-color(shade)};
+:host(.button-solid.ion-activated) .button-native::after {
+  background: #{globals.$ionic-color-primary-900};
 }
 
 // Fill Outline Button
 // --------------------------------------------------
 
 :host(.button-outline) {
-  --border-width: #{$button-ionic-outline-border-width};
-  --border-style: #{$button-ionic-outline-border-style};
-  --background-activated: #e3e3e3;
+  --border-width: #{globals.$ionic-border-size-025};
+  --border-style: #{globals.$ionic-border-style-solid};
+  --background-activated: #{globals.$ionic-color-neutral-200};
   --background-activated-opacity: 1;
   --background-focused: transparent;
   --background-hover: transparent;
   --background-focused-opacity: 0.1;
-  --color-activated: #{ion-color(primary, base)};
+  --color-activated: #{globals.$ionic-color-primary-base};
 }
 
 :host(.button-outline.ion-focused) {
@@ -190,7 +213,7 @@
 // --------------------------------------------------
 
 :host(.button-clear) {
-  --background-activated: #e3e3e3;
+  --background-activated: #{globals.$ionic-color-neutral-200};
   --background-activated-opacity: 1;
   --background-focused: transparent;
   --background-hover: transparent;
@@ -199,22 +222,215 @@
 // Button Hover
 // --------------------------------------------------
 
+:host(.button-solid) {
+  --background-hover: #{globals.$ionic-color-primary-800};
+}
+
 :host(.button-outline),
 :host(.button-clear) {
-  --background-hover: #121212;
-  --background-hover-opacity: 0.04;
+  --background-hover: #{globals.$ionic-color-neutral-100};
 }
 
 // Button: Disabled
 // --------------------------------------------------
 
 :host(.button-disabled) {
-  --color: #c9c9c9;
+  --background: #{globals.$ionic-state-disabled};
   --border-color: var(--color);
 
-  opacity: 1;
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-:host(.button-solid.button-disabled) {
-  --background: #f5f5f5;
+// Solid Button
+// --------------------------------------------------
+
+// Default Solid Color
+:host(.button-solid) {
+  --background: #{globals.$ionic-color-primary-base};
+  --color: #{globals.$ionic-color-base-white};
+}
+
+// Outline Button
+// --------------------------------------------------
+
+// Default Outline Color
+:host(.button-outline) {
+  --border-color: #{globals.$ionic-color-primary-base};
+  --background: #{globals.$ionic-color-base-white};
+  --color: #{globals.$ionic-color-primary-base};
+}
+
+// Clear Button
+// --------------------------------------------------
+
+// Default Clear Color
+:host(.button-clear) {
+  --border-width: #{globals.$ionic-border-size-0};
+  --background: transparent;
+  --color: #{globals.$ionic-color-primary-base};
+}
+
+// Block Button
+// --------------------------------------------------
+
+:host(.button-block) {
+  display: block;
+}
+
+:host(.button-block) .button-native {
+  @include globals.margin-horizontal(0);
+
+  width: 100%;
+
+  clear: both;
+
+  contain: content;
+}
+
+:host(.button-block) .button-native::after {
+  clear: both;
+}
+
+// Full Button
+// --------------------------------------------------
+
+:host(.button-full) {
+  display: block;
+}
+
+:host(.button-full) .button-native {
+  @include globals.margin-horizontal(0);
+
+  width: 100%;
+
+  contain: content;
+}
+
+:host(.button-full:not(.button-round)) .button-native {
+  @include globals.border-radius(0);
+
+  border-right-width: 0;
+  border-left-width: 0;
+}
+
+.button-native {
+  @include globals.border-radius(var(--border-radius));
+  @include globals.font-smoothing();
+  @include globals.margin(0);
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include globals.text-inherit();
+
+  display: flex;
+
+  position: relative;
+
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  min-height: inherit;
+
+  transition: var(--transition);
+
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+
+  outline: none;
+
+  background: var(--background);
+
+  line-height: 1;
+
+  box-shadow: var(--box-shadow);
+
+  contain: layout style;
+  cursor: pointer;
+
+  opacity: var(--opacity);
+  overflow: var(--overflow);
+
+  z-index: 0;
+  box-sizing: border-box;
+  appearance: none;
+}
+
+.button-native::-moz-focus-inner {
+  border: 0;
+}
+
+.button-inner {
+  display: flex;
+  position: relative;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  z-index: 1;
+}
+
+// Button Slots
+// --------------------------------------------------
+
+::slotted([slot="start"]),
+::slotted([slot="end"]) {
+  flex-shrink: 0;
+}
+
+// Button Icons
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+  font-size: globals.$ionic-font-size-500;
+  pointer-events: none;
+}
+
+// Button: States
+// --------------------------------------------------
+
+.button-native::after {
+  @include globals.button-state();
+}
+
+// Button Focused
+:host(.ion-focused) {
+  color: var(--color-focused);
+}
+
+:host(.ion-focused) .button-native::after {
+  background: var(--background-focused);
+
+  opacity: var(--background-focused-opacity);
+}
+
+// Button Hover
+@media (any-hover: hover) {
+  :host(:hover) {
+    color: var(--color-hover);
+  }
+
+  :host(:hover) .button-native::after {
+    background: var(--background-hover);
+
+    opacity: var(--background-hover-opacity);
+  }
+}
+
+// Button Activated
+:host(.ion-activated) {
+  color: var(--color-activated);
+}
+
+:host(.ion-activated) .button-native::after {
+  background: var(--background-activated);
+
+  opacity: var(--background-activated-opacity);
 }
diff --git a/core/src/components/button/button.ionic.vars.scss b/core/src/components/button/button.ionic.vars.scss
deleted file mode 100644
index 56527dbcc1..0000000000
--- a/core/src/components/button/button.ionic.vars.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-@import "../../themes/native/native.globals.ios";
-
-// Ionic Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the button
-$button-ionic-padding-top: px-to-rem(12);
-
-/// @prop - Padding end of the button
-$button-ionic-padding-end: px-to-rem(16);
-
-/// @prop - Padding bottom of the button
-$button-ionic-padding-bottom: $button-ionic-padding-top;
-
-/// @prop - Padding start of the button
-$button-ionic-padding-start: $button-ionic-padding-end;
-
-/// @prop - Minimum height of the button
-$button-ionic-min-height: px-to-rem(40);
-
-/// @prop - Font size of the button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-font-size: dynamic-font-max(14px, 3);
-
-// Ionic Extra Small Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the extra small button
-$button-ionic-xsmall-padding-top: px-to-rem(4);
-
-/// @prop - Padding end of the extra small button
-$button-ionic-xsmall-padding-end: px-to-rem(12);
-
-/// @prop - Padding bottom of the extra small button
-$button-ionic-xsmall-padding-bottom: $button-ionic-xsmall-padding-top;
-
-/// @prop - Padding start of the extra small button
-$button-ionic-xsmall-padding-start: $button-ionic-xsmall-padding-end;
-
-/// @prop - Minimum height of the extra small button
-$button-ionic-xsmall-min-height: px-to-rem(24);
-
-/// @prop - Font size of the extra small button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-xsmall-font-size: dynamic-font-max(12px, 3);
-
-// Ionic Small Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the small button
-$button-ionic-small-padding-top: px-to-rem(8);
-
-/// @prop - Padding end of the small button
-$button-ionic-small-padding-end: px-to-rem(16);
-
-/// @prop - Padding bottom of the small button
-$button-ionic-small-padding-bottom: $button-ionic-small-padding-top;
-
-/// @prop - Padding start of the small button
-$button-ionic-small-padding-start: $button-ionic-small-padding-end;
-
-/// @prop - Minimum height of the small button
-$button-ionic-small-min-height: px-to-rem(32);
-
-/// @prop - Font size of the small button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-small-font-size: dynamic-font-max(12px, 3);
-
-// Ionic Large Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the large button
-$button-ionic-large-padding-top: px-to-rem(16);
-
-/// @prop - Padding end of the large button
-$button-ionic-large-padding-end: px-to-rem(24);
-
-/// @prop - Padding bottom of the large button
-$button-ionic-large-padding-bottom: $button-ionic-large-padding-top;
-
-/// @prop - Padding start of the large button
-$button-ionic-large-padding-start: $button-ionic-large-padding-end;
-
-/// @prop - Minimum height of the large button
-$button-ionic-large-min-height: px-to-rem(48);
-
-/// @prop - Font size of the large button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-large-font-size: dynamic-font-max(16px, 3);
-
-// Ionic Extra Large Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the extra large button
-$button-ionic-xlarge-padding-top: px-to-rem(16);
-
-/// @prop - Padding end of the extra large button
-$button-ionic-xlarge-padding-end: px-to-rem(32);
-
-/// @prop - Padding bottom of the extra large button
-$button-ionic-xlarge-padding-bottom: $button-ionic-xlarge-padding-top;
-
-/// @prop - Padding start of the extra large button
-$button-ionic-xlarge-padding-start: $button-ionic-xlarge-padding-end;
-
-/// @prop - Minimum height of the extra large button
-$button-ionic-xlarge-min-height: px-to-rem(56);
-
-/// @prop - Font size of the extra large button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-xlarge-font-size: dynamic-font-max(20px, 3);
-
-// Ionic Outline Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Border width of the outline button
-$button-ionic-outline-border-width: 1px;
-
-/// @prop - Border style of the outline button
-$button-ionic-outline-border-style: solid;
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 73ae206a48..0f854ab79e 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
index fad2e589a1..0f7b93f632 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
index 1a6bbb297a..c36abd09d9 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3609955670..69f31d5f6c 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ab48ab3bac..09baa370d5 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
index 264e3e231b..443c923859 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 28884a89ec..4063387fde 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a38531cbdc..571f82b38d 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index e1dc9e179c..51bb99e2cb 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a0f7d0beef..c2016b01f4 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 791e9fa938..d50d06cc95 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index e275cdd9e5..9f61a8f76d 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 39a1216492..ab73e9f79e 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1651007699..ec83649dec 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
index 27abb91c2c..c015c4f572 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2296ceca97..85ee77bf8a 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 28b5c09a73..81193aae04 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index a8d9f2aa05..dacdbae792 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e85263832f..592bad1fa3 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1b16abe2a3..0febdc8c09 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 6899b2900d..b463be8e6a 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 3a1d15d918..2f836fffb4 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5b6d616c13..a015867c22 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
index f1af5b4e9e..0d72739c00 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 124a3f7526..32ef6794f3 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 94b85df24f..482130ecfd 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9ba45de85e..702748e0dd 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f82347cb1a..413b5f805d 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a6ebd8ede3..86ba04a8ee 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index ab2e151b73..33a310c141 100644
Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 704a18114b..0a0a9fc56d 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 8553c4fb02..9894639a90 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index e5a3b512fa..2d43379ff4 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 94e141d160..e3fe412cb3 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7487229b19..5eb6eabc07 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index 43af09b81d..69bb2ebc1f 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e350dacb4a..43536f939a 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5d43c8faf3..0de2056599 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
index 73c1e94fbd..f252f6686e 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1f56d8417a..d4e034ed86 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 57c71d80cb..9390df5bc4 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index a91c2e127f..7b11e45ce6 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2a781f8754..814643a5b9 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4178a74f8d..52feea41c5 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index 00adff3273..0b3ec7466f 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2e40537694..2118fabd31 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e5b473820d..0688b1056e 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index 665f72f68f..d2bdb19ca1 100644
Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b2d4580aa6..d04c6fb561 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index c218049589..97187381d9 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 527114708a..60463ec4aa 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
index efe29f9f7a..d04c6fb561 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
index df56f112e2..97187381d9 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5647674ac2..60463ec4aa 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8c33ab7183..beb85dc498 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 86e60473ac..439eaaa833 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index 39a257610f..aebfd83a2d 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 98b0cf577f..beb85dc498 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b562191d14..439eaaa833 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 45d88c9cb4..aebfd83a2d 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e6547485db..50ad3cbd7c 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 3680d3dcc8..4abf64061f 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index b131cb2246..4756dcb06f 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2c98aa14d1..50ad3cbd7c 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 23cf9b6427..4abf64061f 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png
index 88844cadd2..4756dcb06f 100644
Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ