CSS3 Switch (Checkbox)

switch.scss

/* Fancy Checkbox [BEGIN] */
// Emmet: .toggle>input:checkbox#myfancytoggle+label.myfancytoggle>.card

.toggle {
  display: flex;
  position: relative;
  align-self: center;
  user-select: none;

  border: 1px solid $primary;
}

.toggle {
	overflow: hidden;
	&:after,
	&:before {
		flex:1;
		text-align:center;
		line-height:2rem;
	}
	&:after {
	  content:"Ein";
	}
	&:before {
	  content:"Aus";
	}
	label {
		position:absolute;
		top:0; left:0; right:0; bottom:0;
		perspective:1000;
		cursor:pointer;
	}
	.card {
		position:relative;
		background: $primary;
		width:50%;
		height:2.5rem;
		pointer-events:none;
	}
	input { display: none; }
	input:checked + label .card {
		background: tomato;
		right: -50%;
	}
}

/* Fancy Checkbox [END] */