diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index f3c81e30ae..b430c2dac9 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -5,7 +5,7 @@
 // iOS Toolbar Default Button
 // --------------------------------------------------
 
-::slotted(*) ion-button {
+::slotted(*) ion-button.button {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 5px;
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index 78a6791f2c..8a1131b5bc 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -4,7 +4,7 @@
 // Material Design Toolbar Default Button
 // --------------------------------------------------
 
-::slotted(*) ion-button {
+::slotted(*) ion-button.button {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 8px;
diff --git a/core/src/components/chip-button/chip-button.scss b/core/src/components/chip-button/chip-button.scss
index d09010fcdb..8e03b9a37b 100644
--- a/core/src/components/chip-button/chip-button.scss
+++ b/core/src/components/chip-button/chip-button.scss
@@ -39,17 +39,17 @@
   --color: #{ion-color(primary, contrast)};
 }
 
-:host(.chip-button-solid.ion-color) .chip-button-native {
+:host(.chip-button-solid.ion-color) .button-native {
   background: current-color(base);
   color: current-color(contrast);
 }
 
-:host(.chip-button-clear.ion-color) .chip-button-native {
+:host(.chip-button-clear.ion-color) .button-native {
   background: transparent;
   color: current-color(base);
 }
 
-.chip-button-native {
+.button-native {
   @include text-inherit();
   @include border-radius(var(--border-radius));
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@@ -68,7 +68,7 @@
   appearance: none;
 }
 
-.chip-button-inner {
+.button-inner {
   display: flex;
 
   flex-flow: row nowrap;
diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx
index e9af08474b..3ffb57abab 100644
--- a/core/src/components/chip-button/chip-button.tsx
+++ b/core/src/components/chip-button/chip-button.tsx
@@ -56,11 +56,11 @@ export class ChipButton implements ComponentInterface {
     return (
       <TagType
         type="button"
-        class="chip-button-native"
+        class="button-native"
         disabled={this.disabled}
         href={this.href}
       >
-        <span class="chip-button-inner">
+        <span class="button-inner">
           <slot></slot>
         </span>
         {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index dce5cda74d..79898d42f5 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Pr
 
 import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
 import { clamp, deferEvent } from '../../utils/helpers';
-import { createThemedClasses, hostContext } from '../../utils/theme';
+import { hostContext } from '../../utils/theme';
 
 import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
 
@@ -507,7 +507,6 @@ export class Datetime implements ComponentInterface {
 
     return {
       class: {
-        ...createThemedClasses(this.mode, 'datetime'),
         'datetime-disabled': this.disabled,
         'datetime-placeholder': addPlaceholderClass,
         'in-item': hostContext('ion-item', this.el)
diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss
index b6c1b52e3d..07afbc63a9 100755
--- a/core/src/components/fab-button/fab-button.ios.scss
+++ b/core/src/components/fab-button/fab-button.ios.scss
@@ -17,7 +17,7 @@
 }
 
 ::slotted(ion-icon),
-.fab-button-close-icon {
+.close-icon {
   font-size: $fab-ios-icon-font-size;
 }
 
diff --git a/core/src/components/fab-button/fab-button.md.scss b/core/src/components/fab-button/fab-button.md.scss
index 3607b4a6ce..9f9e9ad5cf 100755
--- a/core/src/components/fab-button/fab-button.md.scss
+++ b/core/src/components/fab-button/fab-button.md.scss
@@ -16,7 +16,7 @@
 }
 
 ::slotted(ion-icon),
-.fab-button-close-icon {
+.close-icon {
   font-size: 24px;
 }
 
diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index 046c1e3598..3f8b60926d 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -37,7 +37,7 @@
   --background: #{current-color(tint)};
 }
 
-.fab-button-native {
+.button-native {
   @include text-inherit();
   @include border-radius(50%);
   @include margin(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@@ -69,7 +69,7 @@
   appearance: none;
 }
 
-.fab-button-native[disabled] {
+.button-native[disabled] {
   cursor: default;
   opacity: .5;
   pointer-events: none;
@@ -79,7 +79,7 @@
   line-height: 1;
 }
 
-.fab-button-inner {
+.button-inner {
   @include position(0, 0, null, 0);
 
   display: flex;
@@ -107,7 +107,7 @@
 // FAB Close Icon
 // --------------------------------------------------
 
-.fab-button-close-icon {
+.close-icon {
   @include position(0, 0, null, 0);
 
   display: flex;
@@ -129,13 +129,13 @@
 // FAB Animation
 // --------------------------------------------------
 
-:host(.fab-button-close-active) .fab-button-close-icon {
+:host(.fab-button-close-active) .close-icon {
   transform: scale(1) rotateZ(0deg);
 
   opacity: 1;
 }
 
-:host(.fab-button-close-active) .fab-button-inner {
+:host(.fab-button-close-active) .button-inner {
   transform: scale(.4) rotateZ(45deg);
 
   opacity: 0;
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index c7a93dd201..eaef8ac89f 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -83,15 +83,15 @@ export class FabButton implements ComponentInterface {
 
     return (
       <TagType
-        class="fab-button-native"
+        class="button-native"
         disabled={this.disabled}
         href={this.href}
         onClick={ev => openURL(this.win, this.href, ev, this.routerDirection)}
       >
-        <span class="fab-button-close-icon">
+        <span class="close-icon">
           <ion-icon name="close" lazy={false}></ion-icon>
         </span>
-        <span class="fab-button-inner">
+        <span class="button-inner">
           <slot></slot>
         </span>
         {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss
index 4a7f6e3ec0..cdf9f7e3cd 100644
--- a/core/src/components/item-option/item-option.scss
+++ b/core/src/components/item-option/item-option.scss
@@ -22,7 +22,7 @@
   color: current-color(contrast);
 }
 
-.item-option-native {
+.button-native {
   @include text-inherit();
   @include padding(0, .7em);
 
@@ -41,7 +41,7 @@
   appearance: none;
 }
 
-.item-option-button-inner {
+.button-inner {
   display: flex;
 
   flex-direction: column;
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
index 50b57bad14..3486b7020f 100644
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -65,12 +65,12 @@ export class ItemOption implements ComponentInterface {
     return (
       <TagType
         type="button"
-        class="item-option-native"
+        class="button-native"
         disabled={this.disabled}
         href={this.href}
         onClick={this.clickedOptionButton.bind(this)}
       >
-        <span class="item-option-button-inner">
+        <span class="button-inner">
           <slot name="start"></slot>
           <slot name="top" />
           <slot name="icon-only" />
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index 7d7b7f8a9a..962ea92bf3 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -40,23 +40,23 @@
   font-kerning: none;
 }
 
-:host(:first-of-type) .segment-button-native {
+:host(:first-of-type) .button-native {
   --padding-end: 0;
 
   @include border-radius(var(--border-radius), 0, 0, var(--border-radius));
 }
 
-:host(:not(:first-of-type)) .segment-button-native {
+:host(:not(:first-of-type)) .button-native {
   border-left-width: 0;
 }
 
-:host(:last-of-type) .segment-button-native {
+:host(:last-of-type) .button-native {
   --padding-start: 0;
 
   @include border-radius(0, var(--border-radius), var(--border-radius), 0);
 }
 
-.segment-button-native {
+.button-native {
   @include text-inherit();
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@@ -73,16 +73,13 @@
   border-style: var(--border-style);
   border-color: var(--btn-border-color);
 
+  outline: none;
+
   background: var(--btn-background);
 
   contain: content;
   cursor: pointer;
   overflow: hidden;
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
 }
 
 ::slotted(ion-icon) {
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index b82a1e3e06..8f7a03cba2 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -71,7 +71,7 @@ export class SegmentButton implements ComponentInterface {
       <button
         type="button"
         aria-pressed={this.checked ? 'true' : null}
-        class="segment-button-native"
+        class="button-native"
         disabled={this.disabled}
         onClick={() => this.checked = true}
       >
diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx
index 668599d68a..60bd712504 100644
--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -1,7 +1,6 @@
 import { Component, ComponentInterface, Listen, Prop } from '@stencil/core';
 
 import { Mode, SelectPopoverOption } from '../../interface';
-import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-select-popover',
@@ -32,12 +31,6 @@ export class SelectPopover implements ComponentInterface {
     }
   }
 
-  hostData() {
-    return {
-      class: createThemedClasses(this.mode, 'select-popover')
-    };
-  }
-
   render() {
     return (
       <ion-list>