Merge pull request #1757 from Automattic/fix/#1751

Varia: Fix Faux button style

varia/sass/base/_extends.scss

@@ -14,6 +14,7 @@
 	background-color: #{map-deep-get($config-button, "color", "background")};
 	border-radius: #{map-deep-get($config-button, "border-radius")};
 	border-width: 0;
+	text-decoration: none;
 	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
 
 	&:hover,

varia/sass/blocks/blog-posts/_style.scss

@@ -150,7 +150,7 @@
 }
 
 @import "../../base/extends";
-button[data-load-more-btn] {
+button[data-load-more-btn], .button {
 	// Extend button style
 	@extend %button-style;
 	display: inline-block;

varia/sass/blocks/button/_editor.scss

@@ -40,3 +40,22 @@
 		border-radius: 0;
 	}
 }
+
+/* Default Style */
+.button {
+	color: #{map-deep-get($config-button, "color", "text")};
+	font-weight: #{map-deep-get($config-button, "font", "weight")};
+	@include font-family( map-deep-get($config-button, "font", "family") );
+	font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
+	line-height: #{map-deep-get($config-button, "font", "line-height")};
+	background-color: #{map-deep-get($config-button, "color", "background")};
+	border-radius: #{map-deep-get($config-button, "border-radius")};
+	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+
+	&:hover,
+	&:focus,
+	&.has-focus {
+		color: #{map-deep-get($config-button, "color", "text-hover")};
+		background-color: #{map-deep-get($config-button, "color", "background-hover")};
+	}
+}

varia/sass/blocks/button/_style.scss

@@ -24,6 +24,9 @@ input[type="submit"],
 			border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
 			padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};
 
+			&:active {
+				color: #{map-deep-get($config-button, "color", "background")};
+			}
 
 			&:hover,
 			&:focus,

varia/style-editor.css

@@ -136,6 +136,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 
@@ -480,6 +481,7 @@ object {
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 
@@ -563,6 +565,24 @@ object {
 	border-radius: 0;
 }
 
+/* Default Style */
+.button {
+	color: white;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
+	font-size: 1.2em;
+	line-height: 1;
+	background-color: blue;
+	border-radius: 9px;
+	padding: 16px 16px;
+}
+
+.button:hover, .button:focus, .button.has-focus {
+	color: white;
+	background-color: indigo;
+}
+
 .wp-block-cover,
 .wp-block-cover-image {
 	background-color: black;
@@ -1554,6 +1574,7 @@ table th,
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 

varia/style-rtl.css

@@ -148,8 +148,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -163,15 +162,14 @@ input[type="submit"],
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -181,32 +179,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -234,8 +227,7 @@ input.has-focus[type="submit"],
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -249,15 +241,14 @@ input[type="submit"],
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -267,32 +258,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -1361,8 +1347,7 @@ object {
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -1376,15 +1361,14 @@ input[type="submit"],
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -1394,32 +1378,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -1433,13 +1412,15 @@ input.has-focus[type="submit"],
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn] {
+button[data-load-more-btn], .button {
 	display: inline-block;
 }
 
 .has-background:not(.has-background-background-color) button[data-load-more-btn],
 [class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
-[style*="background-color"] button[data-load-more-btn] {
+[style*="background-color"] button[data-load-more-btn], .has-background:not(.has-background-background-color) .button,
+[class*="background-color"]:not(.has-background-background-color) .button,
+[style*="background-color"] .button {
 	background-color: transparent;
 	border: 2px solid currentColor;
 	color: currentColor;

varia/style-woocommerce-rtl.css

@@ -169,6 +169,7 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 

varia/style-woocommerce.css

@@ -169,6 +169,7 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 

varia/style.css

@@ -148,8 +148,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -163,15 +162,14 @@ input[type="submit"],
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -181,32 +179,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -234,8 +227,7 @@ input.has-focus[type="submit"],
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -249,15 +241,14 @@ input[type="submit"],
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -267,32 +258,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -1361,8 +1347,7 @@ object {
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn], button,
-.button,
+button[data-load-more-btn], .button, button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
@@ -1376,15 +1361,14 @@ input[type="submit"],
 	background-color: blue;
 	border-radius: 9px;
 	border-width: 0;
+	text-decoration: none;
 	padding: 16px 16px;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
-.button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
@@ -1394,32 +1378,27 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button[data-load-more-btn]:before, button:before,
-.button:before,
+button[data-load-more-btn]:before, .button:before, button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
 .wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
-button[data-load-more-btn]:after, button:after,
-.button:after,
+button[data-load-more-btn]:after, .button:after, button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
 .wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
-button:hover,
-.button:hover,
+.button:hover, button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
-.button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .button:focus, button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
-.has-focus.button,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .has-focus.button, button.has-focus,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
@@ -1433,13 +1412,15 @@ input.has-focus[type="submit"],
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button[data-load-more-btn] {
+button[data-load-more-btn], .button {
 	display: inline-block;
 }
 
 .has-background:not(.has-background-background-color) button[data-load-more-btn],
 [class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
-[style*="background-color"] button[data-load-more-btn] {
+[style*="background-color"] button[data-load-more-btn], .has-background:not(.has-background-background-color) .button,
+[class*="background-color"]:not(.has-background-background-color) .button,
+[style*="background-color"] .button {
 	background-color: transparent;
 	border: 2px solid currentColor;
 	color: currentColor;
@@ -1458,6 +1439,10 @@ button[data-load-more-btn] {
 	padding: 14px 16px;
 }
 
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: blue;
+}
+
 .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
 	color: indigo;
 }