<div class="switch enable">
<input type="checkbox" id="on">
<input type="checkbox" id="off">
<label for="on"></label>
<label for="off"></label>
<span class="text-on">ON</span>
<span class="text-on-bar"></span>
<span class="text-off">OFF</span>
<span class="text-off-bar"></span>
<span class="text-glow-on">ON</span>
<span class="text-glow-on-bar"></span>
<span class="text-glow-off">OFF</span>
<span class="text-glow-off-bar"></span>
<div class="bar">
<div class="shadow1"></div>
<div class="shadow2"></div>
<div class="shadow3"></div>
<div class="on"></div>
<div class="off"></div>
</div>
</div>
<!-- github -->
<a href="https://github.com/alikinvv/skeuomorph-switch" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#2f2f2f; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>* {
user-select: none;
}
html,
body {
height: 100%;
}
body {
background: #2f2f2f;
background: linear-gradient(to right, #2f2f2f 0%,#414141 51%,#2f2f2f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#2f2f2f',GradientType=1 );
position: relative;
font-family: 'Dosis', sans-serif;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise.png') repeat 0 0;
z-index: 0;
}
}
.switch {
position: relative;
z-index: 2;
width: 450px;
height: 150px;
border-radius: 300px;
margin-top: 45px;
input {
display: none;
}
label[for="on"] {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 150px;
border-top-left-radius: 300px;
border-bottom-left-radius: 300px;
box-shadow: inset 0 0 89px #78ca68, 0 0 4px 2px rgba(#78ca68, .4);
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise.png') repeat 0 0 #55794e;
&::before {
content: '';
position: absolute;
top: 76px;
left: 60px;
height: 8px;
width: 100px;
background: url(https://alikinvv.github.io/skeuomorph-switch/build/noise2.png) 0 0 #416b3b;
border-radius: 100px;
box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
border-top-left-radius: 300px;
border-bottom-left-radius: 300px;
z-index: 1;
box-shadow: inset -1px 8px 20px rgba(0,0,0,.5);
}
}
label[for="off"] {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 150px;
border-top-right-radius: 300px;
border-bottom-right-radius: 300px;
box-shadow: inset 0 0 89px #251818, 0 0 4px 2px rgba(60,40,39,.4);
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise.png') repeat 0 0 #3c2827;
&::before {
content: '';
position: absolute;
top: 76px;
left: 60px;
height: 8px;
width: 100px;
background: url(https://alikinvv.github.io/skeuomorph-switch/build/noise2.png) 0 0 #251818;
border-radius: 100px;
box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
border-top-right-radius: 300px;
border-bottom-right-radius: 300px;
z-index: 1;
box-shadow: inset -1px 8px 20px rgba(0,0,0,.5);
}
}
}
.bar {
position: absolute;
right: 0;
top: -3px;
height: 156px;
width: 350px;
border-radius: 300px;
background: #323232;
background: linear-gradient(to bottom, #323232 0%,#121212 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323232', endColorstr='#121212',GradientType=0 );
box-shadow: inset 0 -5px 70px 0 rgba(0,0,0,.8), 0 0 0 2px rgba(128,128,128,.2), -3px 6px 15px 0px rgba(0,0,0,.4);
overflow: hidden;
cursor: grab;
z-index: 2;
&:active {
cursor: grabbing;
}
&::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0;
border-radius: 300px;
}
.on {
position: absolute;
top: 50%;
right: 55px;
height: 30px;
width: 5px;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #3a3939;
transform: translateY(-50%);
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
border-radius: 10px;
}
.off {
position: absolute;
top: 50%;
left: 55px;
height: 30px;
width: 30px;
border-radius: 50%;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #3a3939;
transform: translateY(-50%);
border-top: 3px solid #212121;
border-bottom: 2px solid #403f3f;
box-shadow: inset 0 0 27px rgba(0,0,0,.4),
inset 0px -11px 4px -10px rgba(255,255,255,.2),
inset 0px 13px 4px -10px rgba(0,0,0,.2);
}
}
.shadow0 {
top: 3px;
left: 0;
right: 0;
height: 6px;
background: url(https://alikinvv.github.io/skeuomorph-switch/build/noise2.png) 0 0 #fff;
border-radius: 50%;
border-radius: 50%;
filter: blur(20px);
filter: blur(5px);
opacity: .19;
z-index: 1;
}
.shadow1 {
position: absolute;
top: 18px;
left: 60px;
right: 60px;
height: 7px;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #000;
border-radius: 50px;
filter: blur(14px);
opacity: 0.7;
}
.shadow2 {
position: absolute;
top: 38px;
left: 50px;
right: 50px;
height: 10px;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #fff;
border-radius: 50%;
filter: blur(20px);
opacity: 0.2;
}
.shadow3 {
position: absolute;
bottom: 18px;
left: 30px;
right: 30px;
height: 10px;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #000;
border-radius: 50px;
filter: blur(14px);
opacity: 1;
}
.text-on {
position: absolute;
right: 40px;
top: -100px;
font-size: 30px;
color: #989696;
z-index: 1;
}
.text-on-bar {
position: absolute;
top: -55px;
right: 53px;
transform: translateX(-50%);
height: 40px;
width: 4px;
border-radius: 10px;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #303030;
box-shadow: inset 0 0 3px rgba(0,0,0,.3);
z-index: 1;
}
.text-off {
position: absolute;
left: 40px;
top: -100px;
font-size: 30px;
color: #989696;
z-index: 1;
}
.text-off-bar {
position: absolute;
top: -55px;
left: 63px;
transform: translateX(-50%);
height: 40px;
width: 4px;
border-radius: 10px;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #303030;
box-shadow: inset 0 0 3px rgba(0,0,0,.3);
z-index: 1;
}
.text-glow-on {
position: absolute;
right: 40px;
top: -100px;
font-size: 30px;
z-index: 2;
color: #83f76d;
text-shadow: 0 0 5px #6fd45c;
opacity: 1;
}
.text-glow-on-bar {
position: absolute;
top: -55px;
right: 53px;
transform: translateX(-50%);
height: 40px;
width: 4px;
border-radius: 10px;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #83f76d;
box-shadow: inset 0 0 3px rgba(0,0,0,.3);
z-index: 2;
box-shadow: 0 0 5px #6fd45c;
opacity: 1;
}
.text-glow-off {
position: absolute;
left: 40px;
top: -100px;
font-size: 30px;
z-index: 2;
color: #83f76d;
text-shadow: 0 0 5px #6fd45c;
opacity: 0;
}
.text-glow-off-bar {
position: absolute;
top: -55px;
left: 63px;
transform: translateX(-50%);
height: 40px;
width: 4px;
border-radius: 10px;
background: url('https://alikinvv.github.io/skeuomorph-switch/build/noise2.png') repeat 0 0 #83f76d;
box-shadow: inset 0 0 3px rgba(0,0,0,.3);
z-index: 2;
box-shadow: 0 0 5px #6fd45c;
opacity: 0;
}let curDown = false;
let curXPos = 0;
let drag = anime();
let ease = 0;
$(window).on('mousemove touchmove', (e) => {
let pos = e.pageX === undefined ? curXPos - e.originalEvent.touches[0].pageX : curXPos - e.pageX;
let translate = ((pos) * -1) / 2;
if (curDown) {
if (translate > -108 && translate < 0 && $('.switch').hasClass('enable')) {
$('.bar').css('transform', 'translateX(' + translate + 'px)');
$('.text-glow-on').css('opacity', 1 - (Math.abs(translate) / 108));
$('.text-glow-on-bar').css('opacity', 1 - (Math.abs(translate) / 108));
$('.text-glow-off').css('opacity', Math.abs(translate) / 108);
$('.text-glow-off-bar').css('opacity', Math.abs(translate) / 108);
}
if (pos < 215 && pos > -10 && $('.switch').hasClass('disable')) {
$('.bar').css('transform', 'translateX(' + ((pos) * -1) / 2 + 'px)');
$('.text-glow-on').css('opacity', 1 - (Math.abs(translate) / 108));
$('.text-glow-on-bar').css('opacity', 1 - (Math.abs(translate) / 108));
$('.text-glow-off').css('opacity', Math.abs(translate) / 108);
$('.text-glow-off-bar').css('opacity', Math.abs(translate) / 108);
}
}
});
$('body').on('mousedown touchstart', '.bar', (e) => {
let pos = e.pageX === undefined ? e.originalEvent.touches[0].pageX : e.pageX;
curDown = true;
drag.pause();
curXPos = pos + ease;
});
$('body').on('mouseup touchend', (e) => {
let pos = e.pageX === undefined ? e.originalEvent.changedTouches[0].pageX : e.pageX;
drag.pause();
if ($('.switch').hasClass('enable') && curDown) {
if (((curXPos - pos) * -1) / 2 >= -43) {
drag = anime({
targets: '.bar',
translateX: 0
});
$('.text-glow-on').animate({ opacity: 1 }, 100);
$('.text-glow-on-bar').animate({ opacity: 1 }, 100);
$('.text-glow-off').animate({ opacity: 0 }, 100);
$('.text-glow-off-bar').animate({ opacity: 0 }, 100);
} else {
ease = 198;
$('.switch').removeClass('enable').addClass('disable');
drag = anime({
targets: '.bar',
translateX: '-108px'
});
$('.text-glow-on').animate({ opacity: 0 }, 100);
$('.text-glow-on-bar').animate({ opacity: 0 }, 100);
$('.text-glow-off').animate({ opacity: 1 }, 100);
$('.text-glow-off-bar').animate({ opacity: 1 }, 100);
}
} else if ($('.switch').hasClass('disable') && curDown) {
if (((curXPos - pos) * -1) / 2 >= -61) {
ease = 0;
$('.switch').removeClass('disable').addClass('enable');
drag = anime({
targets: '.bar',
translateX: 0
});
$('.text-glow-on').animate({ opacity: 1 }, 100);
$('.text-glow-on-bar').animate({ opacity: 1 }, 100);
$('.text-glow-off').animate({ opacity: 0 }, 100);
$('.text-glow-off-bar').animate({ opacity: 0 }, 100);
} else {
drag = anime({
targets: '.bar',
translateX: '-108px'
});
$('.text-glow-on').animate({ opacity: 0 }, 100);
$('.text-glow-on-bar').animate({ opacity: 0 }, 100);
$('.text-glow-off').animate({ opacity: 1 }, 100);
$('.text-glow-off-bar').animate({ opacity: 1 }, 100);
}
}
curDown = false;
});
External CSS
This Pen doesn't use any external CSS resources.