Removing horizontal gray line from the scss code

HTML-CSS
1

I almost got it.

Right is the multi colored code.

How do I get it to look like the original?

Original:
https://jsfiddle.net/f9h1wu75/

Multi colored code.
https://jsfiddle.net/r6djwa4v/

When it is off, there is not supposed to be a gray horizontal line there.

@mixin play-button-variation($color: white){
	&.active .button { box-shadow: 0 -10px 20px $color; }
	.button {
		background: linear-gradient(
			darken($color, 25%) 0%, 
			darken($color, 33%) 30%, 
			darken($color, 33%) 70%, 
			darken($color, 25%) 100% 
		);
		
		&::before { 
			background: linear-gradient(
				rgba(white, 0.8) 10%, 
				rgba(white, 0.3) 30%, 
				darken($color, 35%) 75%, 
				darken($color, 45%)
			) 50% 50% / 97% 97%, 
			darken($color, 20%); 
		}
		
		.button::after { 
			background-image: linear-gradient(
				darken($color, 35%), 
				darken($color, 45%)
			); 
		}
		.light { 
			background-image: radial-gradient(
				adjust-hue(lighten($color, 20%), 35), 
				$color 40%, 
				transparent 70%
			); 
		}
		.dots { 
			background-image: radial-gradient(
				transparent 30%, 
				rgba(darken($color, 35%), 0.7) 70%
			); 
		}
	}
}
3

I figured out a way to do it without “mixin” and “include”

https://jsfiddle.net/jcpd47en/

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.