@@ -179,4 +179,24 @@ public function test_background_gradient_appends_to_existing_link_style() {
 			$result
 		);
 	}
+
+	/**
+	 * @covers ::gutenberg_render_block_core_button
+	 */
+	public function test_background_gradient_preset_applies_to_link() {
+		$attributes = array(
+			'style' => array(
+				'background' => array(
+					'gradient' => 'var:preset|gradient|purple-to-yellow',
+				),
+			),
+		);
+
+		$result    = gutenberg_render_block_core_button( $attributes, self::$button_content );
+		$processor = new WP_HTML_Tag_Processor( $result );
+		$processor->next_tag( 'a' );
+
+		$this->assertSame( 'background-image:var(--wp--preset--gradient--purple-to-yellow);', $processor->get_attribute( 'style' ) );
+		$this->assertTrue( $processor->has_class( 'has-background' ) );
+	}
 }
@@ -392,12 +392,17 @@ test.describe( 'Buttons', () => {
 			.getByRole( 'option', { name: 'Gradient: Purple to yellow' } )
 			.click();
 
+		// Background support renders on the server, so the gradient is absent from the saved markup.
+		await expect(
+			editor.canvas.locator( '.wp-block-button__link' )
+		).toHaveCSS( 'background-image', /gradient/ );
+
 		// Check the content.
 		const content = await editor.getEditedPostContent();
 		expect( content ).toBe(
 			`<!-- wp:buttons -->
-<div class=\"wp-block-buttons\"><!-- wp:button {\"gradient\":\"purple-to-yellow\"} -->
-<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-purple-to-yellow-gradient-background has-background wp-element-button\">Content</a></div>
+<div class=\"wp-block-buttons\"><!-- wp:button {\"style\":{\"background\":{\"gradient\":\"var:preset|gradient|purple-to-yellow\"}}} -->
+<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Content</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->`
 		);
@@ -437,8 +442,8 @@ test.describe( 'Buttons', () => {
 		const content = await editor.getEditedPostContent();
 		expect( content ).toBe(
 			`<!-- wp:buttons -->
-<div class=\"wp-block-buttons\"><!-- wp:button {\"style\":{\"color\":{\"gradient\":\"linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,255,0) 100%)\"}}} -->
-<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" style=\"background:linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,255,0) 100%)\">Content</a></div>
+<div class=\"wp-block-buttons\"><!-- wp:button {\"style\":{\"background\":{\"gradient\":\"linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,255,0) 100%)\"}}} -->
+<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Content</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->`
 		);