Switch Toggle

Hier noch ein schönes Beispiel für eine Toogle-Programmierung. br> Diesen Schalter habe ich schon einige Male gesehen (voraussichtlich Bootstrap) und dachte mir, das sollte ich doch zum Download anbieten.
Natürlich kein Bootstrap, sondern HTML, CSS und ein bisschen JavaScript.

Doch lasst uns das Beispiel ansehen.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

OFF

Code


HTML:

<div class="switch-border">
	<div class="on-off-back">
		<span class="off">OFF</span>
		<div class="touch-border"></div>
		<span class="on">ON</span>
	</div>
</div>




CSS:

.switch-border{
	width:50px;
	height:30px;	
	background-color:rgba(200,226,157,1);
	border:3px solid rgba(132,139,121,1);
	border-radius:3px;
	overflow:hidden;
}

.on-off-back{
	display:flex;
	width:100px;
	height:30px;
	margin-left:0px;
	background:linear-gradient(90deg, rgba(240,240,240,1) 0% 49%, 
									  rgba(112, 175, 4, 1) 49% 100%);
	transition:margin-left .2s;
}

.off, .touch-border, .on{
	display:inline-block;
	width:38px;
	height:30px;
	color:#000 !important;
	font-size:11px;
	font-weight:600;
	text-align:center;
	vertical-align:middle;
	line-height:30px;
	border:1px solid transparent;
}

.touch-border{
	width:10px;
	background-color:rgba(213,220,226,1);
	border:1px solid #000;
	border-radius:3px;
	cursor:pointer;
}

.left{
	margin-left:-40px;
	transition:margin-left .2s;
}

.touch-border:hover{
	background-color:rgba(204,204,255,1);
}



JavaScript:

if(document.querySelector('.touch-border')){
	document.querySelector('.touch-border').addEventListener('click',goSwitch);

	function goSwitch(){
		document.querySelector('.on-off-back').classList.toggle('left');
		// Do somthing
	}
}