toggle button with ripple

index.html

<button class="btn" id="btn">
	<div class="ripple ripple--dark"></div>
	<div class="ripple ripple--light"></div>
	
	<div class="toggle toggle--dark"></div>
	<div class="toggle toggle--light"></div>
</button>

script.babel

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
	btn.classList.toggle('btn--checked')
})

style.scss

$bg: #F5F5F5;
$gray: #333333;
$white: #FFFFFF;

*, *:before, *:after {
	position: relative;
	box-sizing: border-box;
}

button {
	background-color: transparent;
	border: none;
	margin: 0; padding: 0;
	
	&:focus, &:active {
		outline: none;
		border: none;
	}
}

html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	
	background-color: $bg;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn {
	width: 252px; height: 126px;
	background-color: $white;
	
	border-radius: calc(126px / 2);
	box-shadow: rgba(51, 51, 51, 0.1) 0px 32px 64px 0px;
	
	overflow: hidden;
	
	.ripple.ripple--dark {
		z-index: 1;
		transform: scale(4.8);
		transition: .6s ease;
	}

	.ripple.ripple--light {
		z-index: 2;
		transform: scale(1);
		transition: z-index 0s .6s ease, transform 0s ease;
	}
	
	&#{&}--checked {
		background-color: $gray;
		animation: changeColor .6s ease forwards;
		
		@keyframes changeColor {
			80% {
				background-color: $gray;
			}
			80.01% {
				background-color: $white;
			}
			100% {
				background-color: $white;
			}
		}
		
		.ripple.ripple--dark {
			z-index: 2;
			transform: scale(1);
			transition: z-index 0s .6s ease, transform 0s ease;
		}
		
		.ripple.ripple--light {
			z-index: 1;
			transform: scale(4.8);
			transition: .6s ease;
		}
	}
}

.toggle	{
	width: 80px; height: 80px;
	
	position: absolute;
	top: 23px;
	
	border-radius: 50%;
	
	z-index: 5;
	
	
	&#{&}--dark {
		background-color: $gray;
		left: 23px;
	}
	
	&#{&}--light {
		background-color: white;
		right: 23px;
	}
}

.ripple {
	width: 80px; height: 80px;
	
	position: absolute;
	top: 23px;

	border-radius: 50%;
	
	&#{&}--dark {
		background-color: $gray;
		left: 23px;
	}
	
	&#{&}--light {
		background-color: white;
		right: 23px;
	}
}

toggle-button-with-ripple.markdown

toggle button with ripple

Inspired by https://dribbble.com/shots/4148855-Switcher-XXXIII

A Pen by Irem Lopsum on CodePen.

License.