24_Switches.html

<div class="container">
	<div class="item">
<style>
	* {
		margin: 0;
		box-sizing: border-box;
	}
	.container {
		background: #62306d;
		position: fixed;
		top: 0;
		left: 0;
		width: 400;
		height: 300;
	}
	.item {
		position: absolute;
		bottom: 50;
		left: 80;
		width: 240;
		height: 200;
	}
	.item:before,
	.item:after {
		content: '';
		position: absolute;
		background: #f7ec7d;
		top: 50;
		width: 100;
		height: 100;
		border-radius: 50%;
	}
	.item:after {
		left: 0;
		box-shadow: 0 -50px 0 0 #aa445f, 0 -45px 0 0 #aa445f,
			0 -40px 0 0 #aa445f, 0 -35px 0 0 #aa445f, 0 -30px 0 0 #aa445f,
			0 -25px 0 0 #aa445f, 0 -20px 0 0 #aa445f, 0 -15px 0 0 #aa445f,
			0 -10px 0 0 #aa445f;
	}
	.item:before {
		right: 0;
		box-shadow: 0 50px 0 0 #e38f66, 0 45px 0 0 #e38f66, 0 40px 0 0 #e38f66,
			0 35px 0 0 #e38f66, 0 30px 0 0 #e38f66, 0 25px 0 0 #e38f66,
			0 20px 0 0 #e38f66, 0 15px 0 0 #e38f66, 0 10px 0 0 #e38f66;
	}