label.button-toggle-wrap
	h1.my-text My life is beautiful, because...
	input(type="checkbox" class="toggler" data-toggle='button-toggle')
	.button-toggle
		.handle
			.bars

* {
	&, &:before, &:after {
    	box-sizing: border-box;
	}
}

body {
	font-family: 'Montserrat', sans-serif;
	color: #888;
}

h1 {
	font-weight: 300;
}

.text-red {
	color: lighten(#a21, 30%);
}

.button-toggle-wrap {
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.button-toggle {
	display: inline-block;
	background: lighten(#555, 40%);
	border-radius: 3px;
	height: 48px;
	padding: 4px;
	width: 101px;
	position: relative;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.22);
	
	.handle {
		position: absolute;
		left: 4px;
		right: auto;
		width: 40px;
		height: 40px;
		background: #fff;
		border-radius: 3px;
		transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
		box-shadow: 0 2px 5px rgba(0,0,0,0.22);
	}
}

.toggler {
	display: none;
	
	&:checked {
		& + .button-toggle {
			background: lighten(#a21, 30%);
			
			.handle {
				left: 57px;
			}
		}
	}
}

// non of use
$(function() {
	$("[data-toggle]").click(function() {
		var target = $(".my-text");
		if($(this).prop('checked')) {
			target.html('You are my life <span class="text-red"><3</span>');
		} else {
			target.html('My life is beautiful, because...');
		}
	})
})