Clear nice Custom checkbox

custom checkbox style

$ccb_height: 30px;
$ccb_width: 70px;
$ccb_slider_width: 22px;
$ccb_color_false:#F7836D;
$ccb_color_true:#80b50d;

input[type="checkbox"].custom-checkbox {
    display: none;
}
.custom-checkbox {
  //background false state
	+ label {
		background-color: #fff;
		border-radius: 7px;
		display: inline-block;
		position: relative;
		background: $ccb_color_false;
		width: $ccb_width;
		height: $ccb_height;
		@include box-shadow(inset 0 0 20px rgba(0, 0, 0, 0.1));

		&:before,&:after {
			@include transition(all 0.1s ease-in);
			font-size: 14px;
			position: absolute;
			color: #fff;
			display:block;
		}
		//slider
		&:before {
			position: absolute;
			content: '';
			background: #fff;
			top: 0;
			left: 0;
			width: $ccb_slider_width;
			height: $ccb_height;
			border-radius: 7px;
			@include box-shadow(0 0 1px rgba(0,0,0,0.6));
		}
		//label default:false
		&:after {
			content: 'NO';
			top: 0;
			right: 6px;
			font-weight: bold;
			line-height:$ccb_height;
			vertical-align:middle;
			border-radius: 100px;
		}
	}

	//true state
	&:checked {
		+ label {
			background: $ccb_color_true;
			&:before { left: $ccb_width - $ccb_slider_width; }
			//label true
			&:after {
				content: 'YES';
				left: 6px;
			}
		}
	}
}

gistfile1.html

<input class="custom-checkbox" id="myCoolCheckbox" type="checkbox">
<label for="myCoolCheckbox"></label>

this uses compass and scss, don't forget to include them in your scss files!