diff --git a/wordpress.org/public_html/style/wp4-rtl.css b/wordpress.org/public_html/style/wp4-rtl.css
index a2f4f48da8..043d401009 100644
--- a/wordpress.org/public_html/style/wp4-rtl.css
+++ b/wordpress.org/public_html/style/wp4-rtl.css
@@ -47,7 +47,7 @@ pre {
pre a { font-weight: normal; }
-a {
+a:where(:not(.wp-element-button)) {
color: #21759b;
text-decoration: none;
font-weight: normal;
@@ -57,7 +57,7 @@ strong a {
font-weight: bold;
}
-a:visited {
+a:visited:where(:not(.wp-element-button)) {
color: #4ca6cf;
}
@@ -71,7 +71,27 @@ h3 a { font-weight: bold; }
p a:hover { border-bottom: 1px solid #d54e21; }
-a:hover { color: #d54e21; }
+a:hover:where(:not(.wp-element-button)) { color: #d54e21; }
+
+/*
+ * Buttons are not body links. The link colours above are more specific than the
+ * button colours the block theme emits, which is `:root :where( .wp-block-button
+ * .wp-block-button__link )`, so without the `:not( .wp-element-button )` guards
+ * they repaint button labels. These rules restore the hover, focus and active
+ * states from the same button custom properties the wporg parent theme uses, for
+ * pages that load wp4.css and not the parent theme's button stylesheet.
+ * See https://meta.trac.wordpress.org/ticket/8418
+ */
+.wp-block-button__link:hover,
+.wp-block-button__link:focus {
+ color: var( --wp--custom--button--hover--color--text, #fff );
+ background-color: var( --wp--custom--button--hover--color--background, #213fd4 );
+}
+
+.wp-block-button__link:active {
+ color: var( --wp--custom--button--active--color--text, #fff );
+ background-color: var( --wp--custom--button--active--color--background, #1e1e1e );
+}
h2,
h1.heading {
diff --git a/wordpress.org/public_html/style/wp4.css b/wordpress.org/public_html/style/wp4.css
index 69fc1a641a..6195f5f664 100644
--- a/wordpress.org/public_html/style/wp4.css
+++ b/wordpress.org/public_html/style/wp4.css
@@ -47,8 +47,8 @@ pre {
pre a { font-weight: normal; }
-a:link, /* https://wordpress.slack.com/archives/C02QB2JS7/p1768980644711199 */
-a {
+a:link:where(:not(.wp-element-button)), /* https://wordpress.slack.com/archives/C02QB2JS7/p1768980644711199 */
+a:where(:not(.wp-element-button)) {
color: #21759b;
text-decoration: none;
font-weight: normal;
@@ -58,7 +58,7 @@ strong a {
font-weight: bold;
}
-a:visited {
+a:visited:where(:not(.wp-element-button)) {
color: #4ca6cf;
}
@@ -72,7 +72,27 @@ h3 a { font-weight: bold; }
p a:hover { border-bottom: 1px solid #d54e21; }
-a:hover { color: #d54e21; }
+a:hover:where(:not(.wp-element-button)) { color: #d54e21; }
+
+/*
+ * Buttons are not body links. The link colours above are more specific than the
+ * button colours the block theme emits, which is `:root :where( .wp-block-button
+ * .wp-block-button__link )`, so without the `:not( .wp-element-button )` guards
+ * they repaint button labels. These rules restore the hover, focus and active
+ * states from the same button custom properties the wporg parent theme uses, for
+ * pages that load wp4.css and not the parent theme's button stylesheet.
+ * See https://meta.trac.wordpress.org/ticket/8418
+ */
+.wp-block-button__link:hover,
+.wp-block-button__link:focus {
+ color: var( --wp--custom--button--hover--color--text, #fff );
+ background-color: var( --wp--custom--button--hover--color--background, #213fd4 );
+}
+
+.wp-block-button__link:active {
+ color: var( --wp--custom--button--active--color--text, #fff );
+ background-color: var( --wp--custom--button--active--color--background, #1e1e1e );
+}
h2,
h1.heading {