fixed hover on outlined buttons

seedlet/assets/sass/base/_extends.scss

@@ -1,4 +1,9 @@
 @mixin button-style {
+	@include button-main-styles;
+	@include button-hover-styles;
+}
+
+@mixin button-main-styles {
 	@include crop-text(var(--button--line-height));
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -10,7 +15,9 @@
 	border-width: 0;
 	text-decoration: none;
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
 
+@mixin button-hover-styles {
 	&:not(.has-background) {
 		&:active {
 			color: var(--button--color-text-active);

seedlet/assets/sass/blocks/button/_style.scss

@@ -3,8 +3,7 @@
  */
 button,
 .button,
-input[type="submit"],
-.wp-block-button__link {
+input[type="submit"] {
 	// Extend button style
 	@extend %button-style;
 }
@@ -19,6 +18,15 @@ input[type="submit"],
 	font-weight: var(--button--font-weight);
 	line-height: var(--button--line-height);
 
+	&:not(.is-style-outline) .wp-block-button__link {
+		@include button-hover-styles;
+	}
+
+	&.wp-block-button__link,
+	.wp-block-button__link {
+		@include button-main-styles;
+	}
+
 	// Outline Style
 	&.is-style-outline {
 		border: none;
@@ -33,14 +41,17 @@ input[type="submit"],
 				color: var(--button--color-background);
 			}
 
-			&:active {
-				color: var(--button--color-background);
-			}
+			&.has-secondary-color{
+
+				&:active {
+					color: var(--button--color-background);
+				}
 
-			&:hover,
-			&:focus,
-			&.has-focus {
-				color: var(--button--color-background-hover);
+				&:hover,
+				&:focus,
+				&.has-focus {
+					color: var(--button--color-background-hover);
+				}
 			}
 		}
 	}

seedlet/style-rtl.css

@@ -577,8 +577,7 @@ body {
  */
 button,
 .button,
-input[type="submit"],
-.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
+input[type="submit"], .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -594,11 +593,9 @@ input[type="submit"],
 
 button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -607,36 +604,30 @@ input[type="submit"]:after,
 
 button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:not(.has-background):active,
 .button:not(.has-background):active,
-input:not(.has-background):active[type="submit"],
-.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
+input:not(.has-background):active[type="submit"], .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
 button:not(.has-background):hover,
 .button:not(.has-background):hover,
-input:not(.has-background):hover[type="submit"],
-.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
 .button:not(.has-background):focus,
-input:not(.has-background):focus[type="submit"],
-.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
-input:not(.has-background).has-focus[type="submit"],
-.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
+input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1241,6 +1232,50 @@ object {
 	line-height: var(--button--line-height);
 }
 
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus, .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background).has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-button.wp-block-button__link,
+.wp-block-button .wp-block-button__link {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-button.wp-block-button__link:before, .wp-block-button.wp-block-button__link:after,
+.wp-block-button .wp-block-button__link:before,
+.wp-block-button .wp-block-button__link:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-button.wp-block-button__link:before,
+.wp-block-button .wp-block-button__link:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-button.wp-block-button__link:after,
+.wp-block-button .wp-block-button__link:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
 .wp-block-button.is-style-outline {
 	border: none;
 }
@@ -1257,15 +1292,15 @@ object {
 	color: var(--button--color-background);
 }
 
-.wp-block-button.is-style-outline.wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:active {
+.wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:active,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:active {
 	color: var(--button--color-background);
 }
 
-.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,
-.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 {
+.wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:hover, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color.has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:hover,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color.has-focus {
 	color: var(--button--color-background-hover);
 }
 
@@ -4116,8 +4151,7 @@ img#wpstats {
 
 button,
 .button,
-input[type="submit"],
-.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
+input[type="submit"], .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -4133,11 +4167,9 @@ input[type="submit"],
 
 button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -4146,36 +4178,30 @@ input[type="submit"]:after,
 
 button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:not(.has-background):active,
 .button:not(.has-background):active,
-input:not(.has-background):active[type="submit"],
-.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
+input:not(.has-background):active[type="submit"], .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
 button:not(.has-background):hover,
 .button:not(.has-background):hover,
-input:not(.has-background):hover[type="submit"],
-.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
 .button:not(.has-background):focus,
-input:not(.has-background):focus[type="submit"],
-.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
-input:not(.has-background).has-focus[type="submit"],
-.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
+input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

seedlet/style.css

@@ -577,8 +577,7 @@ body {
  */
 button,
 .button,
-input[type="submit"],
-.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
+input[type="submit"], .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -594,11 +593,9 @@ input[type="submit"],
 
 button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -607,36 +604,30 @@ input[type="submit"]:after,
 
 button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:not(.has-background):active,
 .button:not(.has-background):active,
-input:not(.has-background):active[type="submit"],
-.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
+input:not(.has-background):active[type="submit"], .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
 button:not(.has-background):hover,
 .button:not(.has-background):hover,
-input:not(.has-background):hover[type="submit"],
-.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
 .button:not(.has-background):focus,
-input:not(.has-background):focus[type="submit"],
-.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
-input:not(.has-background).has-focus[type="submit"],
-.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
+input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1241,6 +1232,50 @@ object {
 	line-height: var(--button--line-height);
 }
 
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus, .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background).has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
+.wp-block-button.wp-block-button__link,
+.wp-block-button .wp-block-button__link {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-button.wp-block-button__link:before, .wp-block-button.wp-block-button__link:after,
+.wp-block-button .wp-block-button__link:before,
+.wp-block-button .wp-block-button__link:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-button.wp-block-button__link:before,
+.wp-block-button .wp-block-button__link:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-button.wp-block-button__link:after,
+.wp-block-button .wp-block-button__link:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
 .wp-block-button.is-style-outline {
 	border: none;
 }
@@ -1257,15 +1292,15 @@ object {
 	color: var(--button--color-background);
 }
 
-.wp-block-button.is-style-outline.wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:active {
+.wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:active,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:active {
 	color: var(--button--color-background);
 }
 
-.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,
-.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 {
+.wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:hover, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color:focus, .wp-block-button.is-style-outline.wp-block-button__link.has-secondary-color.has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:hover,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color:focus,
+.wp-block-button.is-style-outline .wp-block-button__link.has-secondary-color.has-focus {
 	color: var(--button--color-background-hover);
 }
 
@@ -4137,8 +4172,7 @@ img#wpstats {
 
 button,
 .button,
-input[type="submit"],
-.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
+input[type="submit"], .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -4154,11 +4188,9 @@ input[type="submit"],
 
 button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -4167,36 +4199,30 @@ input[type="submit"]:after,
 
 button:before,
 .button:before,
-input[type="submit"]:before,
-.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+input[type="submit"]:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
-input[type="submit"]:after,
-.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+input[type="submit"]:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:not(.has-background):active,
 .button:not(.has-background):active,
-input:not(.has-background):active[type="submit"],
-.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
+input:not(.has-background):active[type="submit"], .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
 button:not(.has-background):hover,
 .button:not(.has-background):hover,
-input:not(.has-background):hover[type="submit"],
-.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
 .button:not(.has-background):focus,
-input:not(.has-background):focus[type="submit"],
-.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
 .button:not(.has-background).has-focus,
-input:not(.has-background).has-focus[type="submit"],
-.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
+input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }