A CodePen by GasDauMin.

index.html

<div id="warp">
  <br />
<label for="check"><input id="check" type="checkbox"><span class="strip"></span></label><br /><br />
<label for="check2"><input checked id="check2" type="checkbox"><span class="strip"></span></label>
  <br />
  <br />
  <br />
</div>

script.js

$('#check').change(function(){
    var c = this.checked ? '#000' : '#464646';
    $("body").css('background', c);
});

style.css

a{color:white;text-decoration: none;}
body {
width:100%;
color:#bababa;
background: #464646;
font-family: "helvetica",sans-serif;
box-shadow:inset 0 0 200px black;
-webkit-box-shadow:inset 0 0 200px black;
-moz-box-shadow:inset 0 0 200px black;
}
#warp{width:250px;position: relative;margin:0 auto;display: block;padding: 0 25%}
input{-webkit-appearance: none; -moz-appearance: none;appearance: /*remove default appearance */}
label {
  width: 180px;
  height: 60px;
  cursor: pointer;
  display: inline-block;
	position: relative;
	cursor: pointer;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #111;
	-moz-box-shadow: 1px 1px 0 rgba(255,255,255,.25);
	-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,.25);
	box-shadow: 1px 1px 0 rgba(255,255,255,.25);
}
label:before,
label:after{
position: absolute;
line-height: 64px;
font-size: 15
    px;
font-weight: 600;
z-index: 0;
}
label:before{content: "Įjungti";float: left;left: 15px;}
label:after{content: "Išjungt";float: right;right: 15px;}
label:hover:before{color: #2993e6;}
label:hover:after{color: #d50c63;}
input {
	width: 100px;
	height: 56px;
	margin-top: 2px;
	display: inline-block;
	position: relative;
	margin-left: 2px;
	z-index: 1;
	pointer-events: all;
	cursor: pointer;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #776f6b;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCA1NiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNjE1OTU3IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiM4MzdiNzUiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iIzczNmQ2OSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjNzM2ZDY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZGYzZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYmExOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI1NiIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(90deg, #615957 0%, #837b75 19.78%, #736d69 30.44%, #736d69 69.56%, #fdf3eb 89.77%, #aba19b 100%);
	background-image: -o-linear-gradient(90deg, #615957 0%, #837b75 19.78%, #736d69 30.44%, #736d69 69.56%, #fdf3eb 89.77%, #aba19b 100%);
	background-image: -webkit-linear-gradient(90deg, #615957 0%, #837b75 19.78%, #736d69 30.44%, #736d69 69.56%, #fdf3eb 89.77%, #aba19b 100%);
	background-image: linear-gradient(90deg, #615957 0%, #837b75 19.78%, #736d69 30.44%, #736d69 69.56%, #fdf3eb 89.77%, #aba19b 100%);
	box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.75),0 30px 20px -20px rgba(0, 0, 0, 0.75),0 50px 40px -25px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.75),0 30px 20px -20px rgba(0, 0, 0, 0.75),0 50px 40px -25px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.75),0 30px 20px -20px rgba(0, 0, 0, 0.75),0 50px 40px -25px rgba(0, 0, 0, 0.75);
-webkit-transition: margin 0.3s ease-in;
-moz-transition: margin 0.3s ease-in;
-o-transition: margin 0.3s ease-in;
-ms-transition: margin 0.3s ease-in;
transition: margin 0.3s ease-in;
}
input:checked{
margin-left: 78px;
-webkit-transition: margin 0.3s ease-out;
-moz-transition: margin 0.3s ease-out;
-o-transition: margin 0.3s ease-out;
-ms-transition: margin 0.3s ease-out;
transition: margin 0.3s ease-out;
}
input:before,input:after{
content: "";
position: absolute;
display: inline-block;
margin-top: 1px;
}
input:before {
	width: 37px;
	height: 54px;
	margin-left: 1px;
	float: left;
	-moz-border-radius: 10px 14px 14px 10px ;
	-webkit-border-radius: 10px 14px 14px 10px ;
	border-radius: 10px 14px 14px 10px ;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #857f7d;
	-moz-box-shadow: 1px 0 0 rgba(255,255,248,.7);
	-webkit-box-shadow: 1px 0 0 rgba(255,255,248,.7);
	box-shadow: 1px 0 0 rgba(255,255,248,.7);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDM3IDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM5NzhmOGQiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iIzgxN2Q3OSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EzOWI5NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMzciIGhlaWdodD0iNTQiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(0deg, #978f8d 0%, #817d79 46.44%, #a39b97 100%);
	background-image: -o-linear-gradient(0deg, #978f8d 0%, #817d79 46.44%, #a39b97 100%);
	background-image: -webkit-linear-gradient(0deg, #978f8d 0%, #817d79 46.44%, #a39b97 100%);
	background-image: linear-gradient(0deg, #978f8d 0%, #817d79 46.44%, #a39b97 100%);
}
input:after {
	width: 41px;
	height: 54px;
	float: right;
	right: 0;
	z-index: 1;
	margin-right: 1px;
	-moz-border-radius: 13px 10px 10px 13px ;
	-webkit-border-radius: 13px 10px 10px 13px ;
	border-radius: 13px 10px 10px 13px ;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #877f7d;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDQxIDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1YjU3NTUiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjE5JSIgc3RvcC1jb2xvcj0iIzY5NjU2MSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODU3ZjdkIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiM5Yjk3OTMiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZDc5NzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjQxIiBoZWlnaHQ9IjU0IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
	background-image: -moz-linear-gradient(0deg, #5b5755 0%, #696561 18.68%, #857f7d 50%, #9b9793 98.22%, #7d7979 100%);
	background-image: -o-linear-gradient(0deg, #5b5755 0%, #696561 18.68%, #857f7d 50%, #9b9793 98.22%, #7d7979 100%);
	background-image: -webkit-linear-gradient(0deg, #5b5755 0%, #696561 18.68%, #857f7d 50%, #9b9793 98.22%, #7d7979 100%);
	background-image: linear-gradient(0deg, #5b5755 0%, #696561 18.68%, #857f7d 50%, #9b9793 98.22%, #7d7979 100%);
}
.strip{
position: absolute;
z-index: 10;
display: inline-block;
width: 77px;
margin-left: -88px;
margin-top: 21px;
opacity: 0.55;
}
.strip:before,
.strip:after{
content:"";
height:18px;
position: absolute;
display: inline-block;
width: 1px;
background: black;
box-shadow: -1px 0 0 rgba(255,255,255,0.75),4px 0 0 black,3px 0 0 rgba(255,255,255,0.75),-3px 0 0 black,-4px 0 0 rgba(255,255,255,0.75)}
.strip:before{float: left;left: 0}
.strip:after{float: right;right: 0}

/* Promote */
img,p{margin:0  0 0 -50%;text-align:center}