diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index b8263a81f8..2b6090c0a3 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/c
 
 import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
 import { hasShadowDom } from '../../utils/helpers';
-import { openURL } from '../../utils/theme';
+import { createColorClasses, openURL } from '../../utils/theme';
 
 @Component({
   tag: 'ion-button',
@@ -150,12 +150,13 @@ export class Button {
 
     return {
       class: {
+        ...createColorClasses(color),
         ...getButtonClassMap(buttonType, mode),
         ...getButtonTypeClassMap(buttonType, expand, mode),
         ...getButtonTypeClassMap(buttonType, size, mode),
         ...getButtonTypeClassMap(buttonType, shape, mode),
         ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
-        ...getColorClassMap(buttonType, color, fill, mode),
+        ...getButtonTypeClassMap(buttonType, fill, mode),
         'focused': this.keyFocus,
       },
       'ion-activable': true,
@@ -218,21 +219,3 @@ function getButtonTypeClassMap(buttonType: string, type: string | undefined, mod
     [`${buttonType}-${type}-${mode}`]: true
   };
 }
-
-function getColorClassMap(buttonType: string, color: string | undefined, fill: string | undefined, mode: Mode): CssClassMap {
-  let className = buttonType;
-
-  if (fill !== undefined) {
-    className += `-${fill.toLowerCase()}`;
-  }
-
-  const map: CssClassMap = {
-    [className]: true,
-    [`${className}-${mode}`]: true,
-  };
-  if (color !== undefined) {
-    map[`ion-color`] = true;
-    map[`ion-color-${color}`] = true;
-  }
-  return map;
-}