diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 49ae444c831495..fa72a8bc7835d5 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -2,28 +2,9 @@ $blocks-button__height: 46px;
 $blocks-button__line-height: $big-font-size + 6px;
 
 .wp-block-button {
+	color: $white;
 	margin-bottom: 1.5em;
 
-	& .wp-block-button__link {
-		border: none;
-		border-radius: $blocks-button__height / 2;
-		box-shadow: none;
-		cursor: pointer;
-		display: inline-block;
-		font-size: $big-font-size;
-		line-height: $blocks-button__line-height;
-		margin: 0;
-		padding: ($blocks-button__height - $blocks-button__line-height) / 2 24px;
-		text-align: center;
-		text-decoration: none;
-		white-space: normal;
-		word-break: break-all;
-	}
-
-	&.is-style-squared .wp-block-button__link {
-		border-radius: 0;
-	}
-
 	&.aligncenter {
 		text-align: center;
 	}
@@ -34,45 +15,39 @@ $blocks-button__line-height: $big-font-size + 6px;
 	}
 }
 
-.wp-block-button__link:not(.has-background) {
+.wp-block-button__link {
 	background-color: $dark-gray-700;
+	border: none;
+	border-radius: $blocks-button__height / 2;
+	box-shadow: none;
+	color: inherit;
+	cursor: pointer;
+	display: inline-block;
+	font-size: $big-font-size;
+	line-height: $blocks-button__line-height;
+	margin: 0;
+	padding: ($blocks-button__height - $blocks-button__line-height) / 2 24px;
+	text-align: center;
+	text-decoration: none;
+	white-space: normal;
+	word-break: break-all;
 
 	&:hover,
 	&:focus,
 	&:active {
-		background-color: $dark-gray-700;
+		color: inherit;
 	}
 }
 
-.wp-block-button.is-style-outline {
-	.wp-block-button__link {
-		background: transparent;
-		border: 2px solid currentcolor;
-
-		&:hover,
-		&:focus,
-		&:active {
-			border-color: currentcolor;
-		}
-	}
-
-	.wp-block-button__link:not(.has-text-color) {
-		color: $dark-gray-700;
-
-		&:hover,
-		&:focus,
-		&:active {
-			color: $dark-gray-700;
-		}
-	}
+.is-style-squared .wp-block-button__link {
+	border-radius: 0;
 }
 
-.wp-block-button__link:not(.has-text-color) {
-	color: $white;
+.is-style-outline {
+	color: $dark-gray-700;
 
-	&:hover,
-	&:focus,
-	&:active {
-		color: $white;
+	.wp-block-button__link {
+		background: transparent;
+		border: 2px solid currentcolor;
 	}
 }
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index de1d605d489c61..9d9b2379696b2f 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -22,91 +22,94 @@
 @import "./verse/style.scss";
 @import "./video/style.scss";
 
-.has-pale-pink-background-color {
+// Class names are doubled to increase specificity to assure colors take effect
+// over another base class color.
+
+.has-pale-pink-background-color.has-pale-pink-background-color {
 	background-color: #f78da7;
 }
 
-.has-vivid-red-background-color {
+.has-vivid-red-background-color.has-vivid-red-background-color {
 	background-color: #cf2e2e;
 }
 
-.has-luminous-vivid-orange-background-color {
+.has-luminous-vivid-orange-background-color.has-luminous-vivid-orange-background-color {
 	background-color: #ff6900;
 }
 
-.has-luminous-vivid-amber-background-color {
+.has-luminous-vivid-amber-background-color.has-luminous-vivid-amber-background-color {
 	background-color: #fcb900;
 }
 
-.has-light-green-cyan-background-color {
+.has-light-green-cyan-background-color.has-light-green-cyan-background-color {
 	background-color: #7bdcb5;
 }
 
-.has-vivid-green-cyan-background-color {
+.has-vivid-green-cyan-background-color.has-vivid-green-cyan-background-color {
 	background-color: #00d084;
 }
 
-.has-pale-cyan-blue-background-color {
+.has-pale-cyan-blue-background-color.has-pale-cyan-blue-background-color {
 	background-color: #8ed1fc;
 }
 
-.has-vivid-cyan-blue-background-color {
+.has-vivid-cyan-blue-background-color.has-vivid-cyan-blue-background-color {
 	background-color: #0693e3;
 }
 
-.has-very-light-gray-background-color {
+.has-very-light-gray-background-color.has-very-light-gray-background-color {
 	background-color: #eee;
 }
 
-.has-cyan-bluish-gray-background-color {
+.has-cyan-bluish-gray-background-color.has-cyan-bluish-gray-background-color {
 	background-color: #abb8c3;
 }
 
-.has-very-dark-gray-background-color {
+.has-very-dark-gray-background-color.has-very-dark-gray-background-color {
 	background-color: #313131;
 }
 
-.has-pale-pink-color {
+.has-pale-pink-color.has-pale-pink-color {
 	color: #f78da7;
 }
 
-.has-vivid-red-color {
+.has-vivid-red-color.has-vivid-red-color {
 	color: #cf2e2e;
 }
 
-.has-luminous-vivid-orange-color {
+.has-luminous-vivid-orange-color.has-luminous-vivid-orange-color {
 	color: #ff6900;
 }
 
-.has-luminous-vivid-amber-color {
+.has-luminous-vivid-amber-color.has-luminous-vivid-amber-color {
 	color: #fcb900;
 }
 
-.has-light-green-cyan-color {
+.has-light-green-cyan-color.has-light-green-cyan-color {
 	color: #7bdcb5;
 }
 
-.has-vivid-green-cyan-color {
+.has-vivid-green-cyan-color.has-vivid-green-cyan-color {
 	color: #00d084;
 }
 
-.has-pale-cyan-blue-color {
+.has-pale-cyan-blue-color.has-pale-cyan-blue-color {
 	color: #8ed1fc;
 }
 
-.has-vivid-cyan-blue-color {
+.has-vivid-cyan-blue-color.has-vivid-cyan-blue-color {
 	color: #0693e3;
 }
 
-.has-very-light-gray-color {
+.has-very-light-gray-color.has-very-light-gray-color {
 	color: #eee;
 }
 
-.has-cyan-bluish-gray-color {
+.has-cyan-bluish-gray-color.has-cyan-bluish-gray-color {
 	color: #abb8c3;
 }
 
-.has-very-dark-gray-color {
+.has-very-dark-gray-color.has-very-dark-gray-color {
 	color: #313131;
 }