.container
	.checkbox
		input(type="checkbox" name="example" id="example" value="Bike")
		.checkbox-inner
			label(for="example")
			span
		.checkbox__on ON
		.checkbox__off OFF
		
.inspired-by
	a(href="https://dribbble.com/shots/6388490-Switch-Button", target="_blank") Inspired by Semih Yilmaz
View Compiled
// font import
@import url('https://fonts.googleapis.com/css?family=Montaga|Noto+Sans&display=swap');

// base
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	font-size: 16px;
	background-color: #eceadd;
	font-family: 'Noto Sans', sans-serif;
}

h1, h2, h3 {
	font-family: 'Montaga', serif;
}

// grid
.container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

// checkbox
.checkbox {
	position: relative;
	width: 80px;
	height: 36px;
	background-color: transparent;
}

.checkbox input, .checkbox-inner:before, .checkbox-inner span, .checkbox-inner label {
	position: absolute;
	top: 0;
	left: 0;
}

.checkbox input {
	opacity: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.checkbox-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	border: 2px solid #FFFFFF;
	border-radius: 18px;
	overflow: hidden;
	transform: rotate(-12deg);
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.15);
	transition-property: transform;
	transition-timing-function: linear;
	transition-delay: 0;
	transition-duration: .32s;
}

.checkbox-inner:before {
	content: "";
	width: 100%;
	height: 100%;
	z-index: 2;
	box-shadow: inset 0 10px 16px 0 rgba(0,0,0,0.28);
}

.checkbox-inner span {
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #9CC838;
	transform-origin: right;
	transition-property: transform;
	transition-timing-function: cubic-bezier(.2, .585, 2, .875);
	transition-delay: .32s;
	transition-duration: 1.6s;
}

.checkbox-inner label {
	position: absolute;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-image: radial-gradient(50% 88%, #FFFFFF 3%, #F5F5F5 97%);
	transition-property: left;
	transition-timing-function: cubic-bezier(1, .885, 2, .875);
	transition-delay: .32s;
	transition-duration: 1.32s;
}

.checkbox__on, .checkbox__off {
	position: absolute;
	top: 0;
	height: 100%;
	transition: opacity .32s linear 0s;
}

.checkbox__on {
	right: 100%;
	margin-right: 16px;
	opaciy: 1;
}

.checkbox__off {
	left: 100%;
	margin-left: 16px;
	opacity: .24;
}

.checkbox input:checked + .checkbox-inner {
	transform: rotate(12deg);
}

.checkbox input:checked + .checkbox-inner label {
	left: calc(100% - 32px);
}

.checkbox input:checked + .checkbox-inner span {
	transform: scaleX(0);
}

.checkbox input:checked ~ .checkbox__on {
	opacity: .24;
}

.checkbox input:checked ~ .checkbox__off {
	opacity: 1;
}


// inspired by
.inspired-by {
	position: fixed;
	bottom: 2em;
	left: 2em;
	z-index: 3;
	
	a {
		text-decoration: none;
		color: var(--bg-color);
		font-size: .875em;
		letter-spacing: 1px;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.