Merge pull request #568 from Automattic/fixes/434-correct-button-styles

Textbook: Update styles for buttons

textbook/assets/css/blocks.css

@@ -192,41 +192,33 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Buttons */
 
-.wp-block-button__link {
-	background: #fff;
-	color: #ce4639;
-}
-
 .wp-block-button .wp-block-button__link {
-	-webkit-border-radius: 0.333em;
-	-moz-border-radius: 0.333em;
-	border-radius: 0.333em;
-	border: 1px solid currentColor;
 	font-size: 16px;
 	font-size: 1rem;
 	font-weight: 600;
 	line-height: 1;
 	outline: none;
-	padding: 0.825em 13.5px;
+	padding: 0.825em 20px;
 	-webkit-transition: color 0.125s ease-out, background 0.125s ease-out, border-color 0.125s ease-out;
 	-moz-transition: color 0.125s ease-out, background 0.125s ease-out, border-color 0.125s ease-out;
 	-o-transition: color 0.125s ease-out, background 0.125s ease-out, border-color 0.125s ease-out;
 	transition: color 0.125s ease-out, background 0.125s ease-out, border-color 0.125s ease-out;
 }
 
-.wp-block-button__link.has-text-color {
-	border-color: currentColor;
+.wp-block-button__link,
+.wp-block-button__link:visited {
+	background: #ce4639;
+	color: #fff;
 }
 
-.wp-block-button__link:hover,
-.wp-block-button__link:focus {
-	background: #222;
-	color: #fff;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #ce4639;
 }
 
-.wp-block-button__link.has-background:hover,
-.wp-block-button__link.has-background:focus {
-	opacity: 0.9;
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:focus {
+	background: #222;
+	color: #fff;
 }
 
 /* Separator */

textbook/assets/css/editor-blocks.css

@@ -385,13 +385,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 }
 
-.wp-block-file .wp-block-file__button:hover,
-.wp-block-file .wp-block-file__button:focus {
-	border: 1px solid #222;
-	background: #222;
-	color: #fff;
-}
-
 /*--------------------------------------------------------------
 4.0 Blocks - Formatting
 --------------------------------------------------------------*/
@@ -514,33 +507,21 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	background: #fff;
-	-webkit-border-radius: 0.333em;
-	-moz-border-radius: 0.333em;
-	border-radius: 0.333em;
-	border: 1px solid #ce4639;
-	color: #ce4639;
 	font-size: 16px;
 	font-size: 1rem;
 	font-weight: 600;
 	line-height: 1;
 	outline: none;
-	padding: 0.825em 13.5px;
-	-webkit-transition: color 0.125s ease-out, background 0.125s ease-out, border-color 0.125s ease-out;
-	-moz-transition: color 0.125s ease-out, background 0.125s ease-out, border-color 0.125s ease-out;
-	-o-transition: color 0.125s ease-out, background 0.125s ease-out, border-color 0.125s ease-out;
-	transition: color 0.125s ease-out, background 0.125s ease-out, border-color 0.125s ease-out;
+	padding: 0.825em 20px;
 }
 
-.wp-block-button__link:hover,
-.wp-block-button__link:focus {
-	border: 1px solid #222;
-	background: #222;
+.wp-block-button__link {
+	background: #ce4639;
 	color: #fff;
 }
 
-.wp-block-button .wp-block-button__link.has-text-color {
-	border-color: currentColor;
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #ce4639;
 }
 
 /* Separator */