<main>
	<section class="panel">
		<input id="switch" checked="checked" type="checkbox" />
		<label for="switch"></label>
		<div class="overlay"></div>
	</section>
</main>
*,
*::before,
*::after {
	box-sizing: inherit;
	font-family: inherit;
}

html {
	box-sizing: border-box;
	font-size: 62.5%;
	font-family: 'Alata', sans-serif;
	
	body {
		font-size: 1.6rem;
		position: relative;
		margin: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		background-color: #d9d9d9;
	}
}

// Panel
.panel {
	position: relative;
	width: 24rem;
	height: 36rem;
	background-color: #eee;
	border-radius: 2px;
	border-width: 1rem 0.6rem 0.3rem 0.6rem;
	border-style: solid;
	border-color: #fff #ccc #aaa #ddd;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: column;
	box-shadow: 0px 7px 0px rgba(0, 0, 0, 0.15);
	
	// Screws
	&::before,
	&::after {
		content: '';
		display: block;
		width: 2.5rem;
		height: 2.5rem;
		border: solid 1rem #bbb;
		background-color: #777;
		border-width: 1.1rem 0 1.1rem;
		border-radius: 1.5rem;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5), 0px -1px 0px 0px rgba(255, 255, 255, 0.5);
	}

	&::before {
		transform: rotate(30deg);
	}

	&::after {
		transform: rotate(-10deg);
	}
	
	input {
		display: none;
	}

	// Switch
	label {
		display: block;
		position: relative;
		background-color: #aaa;
		overflow: hidden;
		display: flex;
		justify-content: center;
		width: 5rem;
		height: 10rem;
		cursor: pointer;
		transition: all 0.2s;
		border-radius: 2px;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3) inset;
		border-style: solid;
		border-width: 3px 2px 4px 2px;
		border-color: #aaa #999 #ddd #999;

		&::before,
		&::after {
			content: '';
			display: block;
			position: absolute;
		}

		// Flicker
		&::before {
			transition: all 0.2s;
			width: 95%;
			height: 5rem;
			background-color: #ccc;
			border-style: solid;
			border-width: 0.5rem 2px 2rem 2px;
			border-color: #eee #aaa #888 #ddd;
			top: 0;
			box-shadow: 0px 2.5rem 2px rgba(0, 0, 0, 0.1);
			z-index: 1;
		}

		// Text
		&::after {
			transition: bottom .2s;
			content: 'ON';
			bottom: 6.2rem;
			transform: translateY(5rem);
			color: #af7;
			z-index: 3;
			opacity: 0.75;
			text-shadow: 0px 0px 0.7rem #bf9, 0px 0px 2rem #bf9;
		}
	}

	// Lighting
	.overlay {
		transition: background-color 0.3s 0.1s, opacity 0.3s 0.1s;;
		position: fixed;
		display: block;
		width: 110vw;
		height: 110vh;
		z-index: 2;
		pointer-events: none;
		opacity: 0.75;
		background-color: #081020;
		
		@supports (mix-blend-mode: darken) {
			mix-blend-mode: darken;
		}
	}

	#switch:checked {
		// Panel ON
		& ~ label {
			background-color: #c9c9c9;
			border-color: #aaa #999 #a5a5a5 #999;
			box-shadow: 0px 5px 4px 2px rgba(0, 0, 0, 0.1) inset,
				0px 2rem 0px -1px rgba(0, 0, 0, 0.2);

			// Flicker ON
			&::before {
				top: 4.5rem;
				box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
				border-width: 2rem 2px 0.5rem 2px;
			}

			// Text ON
			&::after {
				content: 'OFF';
				bottom: 0.9rem;
				color: #b87;
				z-index: 0;
				opacity: 1;
				text-shadow: none;
				transform: translateY(-5rem);
			}
		}

		// Lighting ON
		& ~ .overlay {
			opacity: 0;
			
			@supports (mix-blend-mode: darken) {
				opacity: 0.9;
				background-color: #fffcf3;
			}
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.