diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 913daf0f92e0c..424e305bd585e 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -11,7 +11,9 @@ import {
 	useBlockProps,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	JustifyContentControl,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,7 +21,6 @@ import {
 import { name as buttonBlockName } from '../button';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
-const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 const LAYOUT = {
 	type: 'default',
 	alignments: [],
@@ -42,9 +43,21 @@ function ButtonsEdit( {
 			'is-vertical': orientation === 'vertical',
 		} ),
 	} );
+	const preferredStyle = useSelect( ( select ) => {
+		const preferredStyleVariations = select(
+			blockEditorStore
+		).getSettings().__experimentalPreferredStyleVariations;
+		return preferredStyleVariations?.value?.[ buttonBlockName ];
+	}, [] );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
-		template: BUTTONS_TEMPLATE,
+		template: [
+			[
+				buttonBlockName,
+				{ className: preferredStyle && `is-style-${ preferredStyle }` },
+			],
+		],
 		orientation,
 		__experimentalLayout: LAYOUT,
 		templateInsertUpdatesSelection: true,
diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
index beea2796c988b..9bee300cba01d 100644
--- a/packages/block-library/src/buttons/edit.native.js
+++ b/packages/block-library/src/buttons/edit.native.js
@@ -26,7 +26,6 @@ import { name as buttonBlockName } from '../button/';
 import styles from './editor.scss';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
-const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
 const layoutProp = { type: 'default', alignments: [] };
 
@@ -65,6 +64,14 @@ export default function ButtonsEdit( {
 		},
 		[ clientId ]
 	);
+
+	const preferredStyle = useSelect( ( select ) => {
+		const preferredStyleVariations = select(
+			blockEditorStore
+		).getSettings().__experimentalPreferredStyleVariations;
+		return preferredStyleVariations?.value?.[ buttonBlockName ];
+	}, [] );
+
 	const { getBlockOrder } = useSelect( blockEditorStore );
 	const { insertBlock, removeBlock, selectBlock } = useDispatch(
 		blockEditorStore
@@ -133,7 +140,16 @@ export default function ButtonsEdit( {
 			{ resizeObserver }
 			<InnerBlocks
 				allowedBlocks={ ALLOWED_BLOCKS }
-				template={ BUTTONS_TEMPLATE }
+				template={ [
+					[
+						buttonBlockName,
+						{
+							className:
+								preferredStyle &&
+								`is-style-${ preferredStyle }`,
+						},
+					],
+				] }
 				renderFooterAppender={
 					shouldRenderFooterAppender && renderFooterAppender.current
 				}