A Pen by Cezar Luiz.

index.html

<a href="#" class="switch off" id="switch"></a>

script.js

var btnSwitch = document.getElementById('switch');

	btnSwitch.addEventListener('click', function (e) {
		e.preventDefault();

		this.classList.toggle('off');
		this.classList.toggle('on');
	});

style.css

.switch {
	width: 102px;
	height: 62px;
	margin: 50px auto;
	border-radius: 40px;
	position: relative;
	transition: all .5s;
	display: block;
}

.switch::before {
	content: ' ';
	width: 102%;
	height: 100%;
	position: absolute;
	background: #FFF;
	border-radius: 40px;

	transition: all .28s;
}

.switch::after {
	content: ' ';
	height: 56px;
	border-radius: 50%;
	background: #FFF;
	position: absolute;
	top: 3px;

	transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.switch:active::after {
	border-radius: 40px;
}


.switch.on {
	background: #47d959;
}

.switch.on::after {
	left: 43px;
	right: 3px;

	box-shadow: rgba(0, 0, 0, .07) -2px 7px 3px, rgba(0, 0, 0, .5) 0 1px 5px;
}

.switch.on:active::after {
	left: 30px;
}

.switch.on::before, .switch.off:active:before {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

.switch.off {
	background: #e6e6e6;
}

.switch.off::after {
	left: 3px;
	right: 43px;

	box-shadow: rgba(0, 0, 0, .07) 2px 7px 3px, rgba(0, 0, 0, .5) 0 1px 5px;
}

.switch.off::before {
	-webkit-transform: scale(.9);
	-moz-transform: scale(.9);
	-ms-transform: scale(.9);
	-o-transform: scale(.9);
	transform: scale(.9);
}

.switch.off:active::after {
	right: 30px;
}

Switch-iOS-7-CSS-+-JS.markdown

Switch iOS 7 CSS + JS

iOS7 switch made with CSS + JS

A Pen by Cezar Luiz on CodePen.

License.