diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
deleted file mode 100644
index 22ff1ef1307be..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
-
-function ScreenButtonColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
-
-	const hasButtonColor =
-		supports.includes( 'buttonColor' ) &&
-		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const [ buttonTextColor, setButtonTextColor ] = useStyle(
-		'elements.button.color.text',
-		name
-	);
-	const [ userButtonTextColor ] = useStyle(
-		'elements.button.color.text',
-		name,
-		'user'
-	);
-
-	const [ buttonBgColor, setButtonBgColor ] = useStyle(
-		'elements.button.color.background',
-		name
-	);
-	const [ userButtonBgColor ] = useStyle(
-		'elements.button.color.background',
-		name,
-		'user'
-	);
-
-	if ( ! hasButtonColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Buttons' ) }
-				description={ __(
-					'Set the default colors used for buttons across the site.'
-				) }
-			/>
-
-			<h4 className="edit-site-global-styles-section-title">
-				{ __( 'Text color' ) }
-			</h4>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonTextColor }
-				onColorChange={ setButtonTextColor }
-				clearable={ buttonTextColor === userButtonTextColor }
-			/>
-
-			<h4 className="edit-site-global-styles-section-title">
-				{ __( 'Background color' ) }
-			</h4>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonBgColor }
-				onColorChange={ setButtonBgColor }
-				clearable={ buttonBgColor === userButtonBgColor }
-			/>
-		</>
-	);
-}
-
-export default ScreenButtonColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-color-element.js b/packages/edit-site/src/components/global-styles/screen-color-element.js
index db34d25e85292..79e7f1c85e66d 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-element.js
@@ -44,15 +44,24 @@ function ScreenColorElement( { name, element } ) {
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
 
-	const hasElementColor =
+	let hasElementColor =
 		supports.includes( 'color' ) &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 
+	if ( supports.includes( 'buttonColor' ) ) {
+		hasElementColor =
+			supports.includes( 'buttonColor' ) &&
+			isBackgroundEnabled &&
+			( solids.length > 0 || areCustomSolidsEnabled );
+	}
+
 	const [ elementTextColor, setElementTextColor ] = useStyle(
 		'elements.' + element + '.color.text',
 		name
 	);
+
 	const [ userElementTextColor ] = useStyle(
 		'elements.' + element + '.color.text',
 		name,
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 0f33166f20524..2e5626b789d62 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -22,7 +22,6 @@ import ScreenColorElement from './screen-color-element';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenHeadingColor from './screen-heading-color';
-import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 
@@ -118,7 +117,7 @@ function ContextScreens( { name } ) {
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
-				<ScreenButtonColor name={ name } />
+				<ScreenColorElement name={ name } element="button" />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>