Pure CSS toggle buttons

index.haml

%h2 Toggle it!
%ul.tg-list
  %li.tg-list-item
    %h4 Light
    %input#cb1.tgl.tgl-light{type: "checkbox"}/
    %label.tgl-btn{for: "cb1"}
  %li.tg-list-item
    %h4 iOS 7
    %input#cb2.tgl.tgl-ios{type: "checkbox"}/
    %label.tgl-btn{for: "cb2"}
  %li.tg-list-item
    %h4 Skewed
    %input#cb3.tgl.tgl-skewed{type: "checkbox"}/
    %label.tgl-btn{"data-tg-off" => "OFF", "data-tg-on" => "ON", for: "cb3"}
  %li.tg-list-item
    %h4 Flat
    %input#cb4.tgl.tgl-flat{type: "checkbox"}/
    %label.tgl-btn{for: "cb4"}
  %li.tg-list-item
    %h4 Flip
    %input#cb5.tgl.tgl-flip{type: "checkbox"}/
    %label.tgl-btn{"data-tg-off" => "Nope", "data-tg-on" => "Yeah!", for: "cb5"}

Pure-CSS-toggle-buttons.markdown

Pure CSS toggle buttons

A Pen by Mauricio Allende on CodePen.

License.

script.js

/** Toggle buttons
 * @mallendeo
 */

style.scss

html, body {
	display: flex;
	min-height: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: sans-serif;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tg-list{
	text-align: center;
	display: flex;
	align-items: center;
}
.tg-list-item{
	margin: 0 2em;
}
h2{
	color: #777;
}
h4{
	color: #999;
}
.tgl{
	display: none;
	// add default box-sizing for this scope
	&, &:after, &:before,
	& *, & *:after, & *:before,
	& + .tgl-btn{
		box-sizing: border-box;
		&::selection{
			background: none;
		}
	}
	+ .tgl-btn{
		outline: 0;
		display: block;
		width: 4em;
		height: 2em;
		position: relative;
		cursor: pointer;
     user-select: none;
		&:after, &:before{
			position: relative;
			display: block;
			content: "";
			width: 50%;
			height: 100%;
		}
		&:after{
			left: 0;
		}
		&:before{
			display: none;
		}
	}
	&:checked{
		+ .tgl-btn{
			&:after{
				left: 50%;
			}
		}
	}
}

// themes
.tgl-light{
	+ .tgl-btn{
		background: #f0f0f0;
		border-radius: 2em;
		padding: 2px;
		transition: all .4s ease;
		&:after{
			border-radius: 50%;
			background: #fff;
			transition: all .2s ease;
		}
	}
	&:checked{
		+ .tgl-btn{
			background: #9FD6AE;
		}
	}
}
.tgl-ios{
	+ .tgl-btn{
		background: #fbfbfb;
		border-radius: 2em;
		padding: 2px;
		transition: all .4s ease;
		border: 1px solid #e8eae9;
		&:after{
			border-radius: 2em;
			background: #fbfbfb;
			transition:
        left .3s cubic-bezier(
          0.175, 0.885, 0.320, 1.275
        ),
        padding .3s ease, margin .3s ease;
			box-shadow:
        0 0 0 1px rgba(0,0,0,.1),
        0 4px 0 rgba(0,0,0,.08);
		}	
		&:active{
			box-shadow: inset 0 0 0 2em #e8eae9;
			&:after{
				padding-right: .8em;
			}
		}
	}
	&:checked{
		+ .tgl-btn{
			background: #86d993;
			&:active{
				box-shadow: none;
				&:after{
					margin-left: -.8em;
				}
			}
		}
	}
}
.tgl-skewed{
	+ .tgl-btn{
		overflow: hidden;
		transform: skew(-10deg);
		backface-visibility: hidden;
		transition: all .2s ease;
		font-family: sans-serif;
		background: #888;
		&:after, &:before{
			transform: skew(10deg);
			display: inline-block;
			transition: all .2s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;

			text-shadow: 0 1px 0 rgba(0,0,0,.4);
		}
		&:after{
			left: 100%;
			content: attr(data-tg-on);
		}	
		&:before{
			left: 0;
			content: attr(data-tg-off);
		}	
		&:active{
			background: #888;
			&:before{
				left: -10%;
			}
		}
	}
	&:checked{
		+ .tgl-btn{
			background: #86d993;
			&:before{
				left: -100%;
			}	
			&:after{
				left: 0;
			}
			&:active{
				&:after{
					left: 10%;
				}
			}
		}
	}
}
.tgl-flat{
	+ .tgl-btn{
		padding: 2px;
		transition: all .2s ease;
		background: #fff;
		border: 4px solid #f2f2f2;
		border-radius: 2em;
		&:after{
			transition: all .2s ease;
			background: #f2f2f2;
			content: "";
			border-radius: 1em;
		}
	}
	&:checked{
		+ .tgl-btn{
			border: 4px solid #7FC6A6;
			&:after{
				left: 50%;
				background: #7FC6A6;
			}
		}
	}
}

.tgl-flip{
	+ .tgl-btn{
		padding: 2px;
		transition: all .2s ease;
		font-family: sans-serif;
		perspective: 100px;
		&:after, &:before{
			display: inline-block;
			transition: all .4s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			backface-visibility: hidden;
			border-radius: 4px;
		}
		&:after{
			content: attr(data-tg-on);
			background: #02C66F;
			transform: rotateY(-180deg);
		}	
		&:before{
			background: #FF3A19;
			content: attr(data-tg-off);
		}

		&:active{
			&:before{
				transform: rotateY(-20deg);
			}
		}
	}
	&:checked{
		+ .tgl-btn{
			&:before{
				transform: rotateY(180deg);
			}	
			&:after{
				transform: rotateY(0);
				left: 0;
				background: #7FC6A6;
			}
			&:active{
				&:after{
					transform: rotateY(20deg);
				}
			}
		}
	}
}