diff --git a/packages/edit-site/src/components/style-book/button-examples.tsx b/packages/edit-site/src/components/style-book/button-examples.tsx
new file mode 100644
index 00000000000000..98a4b8bd33e521
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/button-examples.tsx
@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
+import {
+	BlockList,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
+
+const BUTTON_STATES = [
+	{
+		key: 'default',
+		title: __( 'Button' ),
+	},
+	{
+		key: ':active',
+		title: __( 'Button (Active)' ),
+	},
+	{
+		key: ':any-link',
+		title: __( 'Button (Any Link)' ),
+	},
+	{
+		key: ':focus',
+		title: __( 'Button (Focus)' ),
+	},
+	{
+		key: ':hover',
+		title: __( 'Button (Hover)' ),
+	},
+	{
+		key: ':link',
+		title: __( 'Button (Link)' ),
+	},
+	{
+		key: ':visited',
+		title: __( 'Button (Visited)' ),
+	},
+];
+
+function ButtonExamples() {
+	const [ elementsButton ] = useGlobalStyle( 'elements.button' );
+	const blocks = BUTTON_STATES.map( ( { key } ) => {
+		const styles =
+			( key !== 'default' ? elementsButton[ key ] : elementsButton ) ||
+			{};
+		return createBlock( 'core/button', {
+			text: __( 'Call to Action' ),
+			style: styles,
+		} );
+	} );
+
+	return (
+		<Grid columns={ 2 } gap={ 6 }>
+			{ blocks.map( ( block, index ) => (
+				<View key={ `button-example-${ BUTTON_STATES[ index ].key }` }>
+					<span className="edit-site-style-book__example-subtitle">
+						{ BUTTON_STATES[ index ].title }
+					</span>
+					<ExperimentalBlockEditorProvider value={ [ block ] }>
+						<BlockList appender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</View>
+			) ) }
+		</Grid>
+	);
+}
+
+export default ButtonExamples;
diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
index 7b13e3d4ef7f60..981fd738b83fba 100644
--- a/packages/edit-site/src/components/style-book/constants.ts
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -239,6 +239,11 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 		text-transform: uppercase;
 	}
 
+	.edit-site-style-book__example-subtitle {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 9px;
+	}
+
 	.edit-site-style-book__subcategory-title {
 		font-size: 16px;
 		margin-bottom: 40px;
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index c944b87b09d7e1..49db3a79144f90 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -16,6 +16,7 @@ import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
 import ColorExamples from './color-examples';
 import DuotoneExamples from './duotone-examples';
 import { STYLE_BOOK_COLOR_GROUPS } from './constants';
+import ButtonExamples from './button-examples';
 
 /**
  * Returns examples color examples for each origin
@@ -177,11 +178,14 @@ function getOverviewBlockExamples(
  * @return {BlockExample[]} An array of block examples.
  */
 export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	// Exclude default examples from block to include custom examples for those blocks.
+	const excludedDefaultExamples = [ 'core/heading', 'core/button' ];
+
 	const nonHeadingBlockExamples = getBlockTypes()
 		.filter( ( blockType ) => {
 			const { name, example, supports } = blockType;
 			return (
-				name !== 'core/heading' &&
+				! excludedDefaultExamples.includes( name ) &&
 				!! example &&
 				supports?.inserter !== false
 			);
@@ -227,10 +231,17 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 		} ),
 	};
 	const colorExamples = getColorExamples( colors );
-
 	const overviewBlockExamples = getOverviewBlockExamples( colors );
 
+	const buttonExample = {
+		name: 'core/button',
+		title: __( 'Button' ),
+		category: 'design',
+		content: <ButtonExamples />,
+	};
+
 	return [
+		buttonExample,
 		headingsExample,
 		...colorExamples,
 		...nonHeadingBlockExamples,