<div class="center"><input id="switch" type="checkbox" />
<div class="wrap"><label for="switch"><span class="rib"></span><span class="rib"></span><span class="rib"></span></label></div>
</div><a class="sig" href="http://nathan.tokyo" target="_blank">NATHAN.TOKYO</a>
html {
font-size: 5vh;
}
body {
height: 100vh;
width: 100vw;
background: linear-gradient(#c1cdcd, #94a8a8);
font-family: 'Open Sans', sans-serif;
}
#switch {
outline: none;
display: block;
appearance: none;
position: relative;
width: 6rem;
height: 2rem;
background: #2e426b;
border-radius: 2rem;
appearance: none;
filter: blur(0.4px);
box-shadow: -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6), 0.05rem 0.05rem 0.1rem rgba(182, 251, 228, 1), inset 0.5rem 0.5rem 2rem rgba(0, 0, 51, 0.5), inset 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75), inset -0.5rem -0.5rem 4rem rgba(182, 251, 228, 0.5);
}
.wrap {
display: block;
position: relative;
width: 6rem;
height: 2rem;
border-radius: 2rem;
overflow: hidden;
z-index: 1;
transform: translatey(-100%);
}
label {
display: block;
position: absolute;
top: 50%;
left: 0.1rem;
width: 4rem;
height: 1.8rem;
background: #abbaba;
border-radius: 2rem;
transform: translate3d(0%, -50%, 0);
transition: transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
filter: blur(0.4px);
box-shadow: inset -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6), inset 0.05rem 0.05rem 0.1rem rgba(182, 251, 228, 1), 0.5rem 0.5rem 2rem rgba(0, 0, 51, 0.5), 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75);
}
#switch:checked + div label {
transform: translate3d(1.85rem, -50%, 0);
}
.rib {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 0.35rem;
height: 1.2rem;
border-radius: 1rem;
background: #abbaba;
opacity: 1;
transform: translate3d(-50%, -50%, 0);
box-shadow: inset -0.02rem -0.03rem 0.08rem rgba(0, 0, 51, 0.5), inset 0.03rem 0.03rem 0.1rem rgba(182, 251, 228, 1), inset -0.02rem -0.03rem 0.2rem rgba(0, 0, 51, 0.3), inset 0.03rem 0.03rem 0.2rem rgba(182, 251, 228, 0.8), 0.05rem 0.08rem 0.3rem rgba(0, 0, 51, 0.3), -0.05rem -0.08rem 0.4rem rgba(182, 251, 228, 0.3), 0rem 0rem 0.2rem rgba(46, 66, 107, 0.2);
}
.rib:nth-child(1) {
left: 35%;
}
.rib:nth-child(3) {
left: 65%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(0, 0, 0, 0.4);
letter-spacing: 2px;
}