fixed outlined button for gradient style

Author: UnderlineWords

src/Elements/Button/mixins.scss

@@ -308,64 +308,67 @@
 
 	///
 	/// GRADIENT
+	/// Gradient is not for outlined style
 	///
-	@if options('button', 'features', 'gradient') {
-		&.#{class('button', 'gradient')} {
-			background: $bg-color;
-			z-index: 1;
-			position: relative;
-			@include set-gradient($bg-color, to top);
-			&:before {
-				content: "";
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				@include set-gradient($bg-color, to bottom, 23%);
-				opacity: 0;
-				transition: opacity 0.25s;
-				z-index: -1;
-			}
-			&:hover::before {
-				opacity: 1;
-			}
-			&:active::before,
-			&:focus::before {
+	@if $outlined != true {
+		@if options('button', 'features', 'gradient') {
+			&.#{class('button', 'gradient')} {
 				background: $bg-color;
-				@include set-gradient($bg-color, to bottom, 27%);
-			}
-		}
-		/// Gradient Left-To-Right
-		&.#{class('button', 'gradient')}#{'-ltr'} {
-			background: linear-gradient(125deg, lighten($bg-color, 21%), darken($bg-color, 5%));
-		}
-		/// Gradient Right-To-Left
-		&.#{class('button', 'gradient')}#{'-rtl'} {
-			background: linear-gradient(-125deg, lighten($bg-color, 21%), darken($bg-color, 5%));
-		}
-		&.#{class('button', 'gradient')}#{'-ltr'},
-		&.#{class('button', 'gradient')}#{'-rtl'} {
-			z-index: 1;
-			position: relative;
-			&:before {
-				position: absolute;
-				content: "";
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-				opacity: 0;
-				transition: opacity 0.25s;
-				z-index: -1;
-				background: linear-gradient(0deg, lighten($bg-color, 21%), darken($bg-color, 2%));
-			}
-			&:hover::before {
-				opacity: 1;
+				z-index: 1;
+				position: relative;
+				@include set-gradient($bg-color, to top);
+				&:before {
+					content: "";
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					@include set-gradient($bg-color, to bottom, 23%);
+					opacity: 0;
+					transition: opacity 0.25s;
+					z-index: -1;
+				}
+				&:hover::before {
+					opacity: 1;
+				}
+				&:active::before,
+				&:focus::before {
+					background: $bg-color;
+					@include set-gradient($bg-color, to bottom, 27%);
+				}
 			}
-			&:active::before,
-			&:focus::before {
-				background: linear-gradient(0deg, lighten($bg-color, 25%), $bg-color);
+			/// Gradient Left-To-Right
+			&.#{class('button', 'gradient')}#{'-ltr'} {
+				background: linear-gradient(125deg, lighten($bg-color, 21%), darken($bg-color, 5%));
+			}
+			/// Gradient Right-To-Left
+			&.#{class('button', 'gradient')}#{'-rtl'} {
+				background: linear-gradient(-125deg, lighten($bg-color, 21%), darken($bg-color, 5%));
+			}
+			&.#{class('button', 'gradient')}#{'-ltr'},
+			&.#{class('button', 'gradient')}#{'-rtl'} {
+				z-index: 1;
+				position: relative;
+				&:before {
+					position: absolute;
+					content: "";
+					width: 100%;
+					height: 100%;
+					top: 0;
+					left: 0;
+					opacity: 0;
+					transition: opacity 0.25s;
+					z-index: -1;
+					background: linear-gradient(0deg, lighten($bg-color, 21%), darken($bg-color, 2%));
+				}
+				&:hover::before {
+					opacity: 1;
+				}
+				&:active::before,
+				&:focus::before {
+					background: linear-gradient(0deg, lighten($bg-color, 25%), $bg-color);
+				}
 			}
 		}
 	}