CSS yes/no switch from checkbox

readme.md

Notes

Install Selectivizr (http://selectivizr.com/) to enable compatibility for IE8 and less

checkbox.html

<div class="checkbox-wrap">
	<input name="checkbox1" type="checkbox" value="Yes" checked="checked" id="checkbox1">
	<label for="checkbox1" id="label1">Yes</label>
</div>

style.scss

$color-yes: green;
$color-no: red;

.checkbox-wrap{
font-family: 'Source Sans Pro', Arial, sans-serif;
padding: 0;
border: none;
position: relative;

	label{
	display: block;
	position: relative;
	color: lighten(black, 40%);
	background: darken(white, 10%);
	width: 74px;
	height: 32px;
	cursor: pointer;
	transition: left 0.15s ease-out; 
	font-size: 13px;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 2.6;
	text-indent: 8px;
	@include user-select(none);

		&:after{
		content: "No";
		display: block;
		background: $color-no;
		position: absolute;
		width: 28px;
		height: 32px;
		right: 0;
		top: 0;
		color: white;
		text-indent: 0;
		@include user-select(none);
		}

		&:before{
		content: "";
		display: block;
		position: absolute;
		right: 28px;
		top: 0;
		width: 0;
		height: 0;
		border-top: 32px solid transparent;
		border-right: 18px solid red;
		border-bottom: 0 solid transparent;
		-moz-transform: scale(.9999); // Anti-aliasing fix for Firefox
		}

	}

	input{
	opacity: 0;
	position: absolute;
	top: 9px;
	left: 10px;
	padding: 0;

		& + label{
		margin-left: 0;
		margin-right: 0; 
		}

		&:checked{

			& + label{
			background: $color-yes;
			color: white;

				&:after{
				right: 0;
				left: auto; 
				color: lighten(black, 40%);
				background-color: darken(white, 10%);
				}

				&:before{
 				border-right-color: darken(white, 10%);
				}

			}

		}

	}	

}