<div class="container">
<input id="switch" type="checkbox" hidden>
<label for="switch" class="switch">
<h1 class="female">✝</h1>
<h1 class="male">➜</h1>
</label>
</div>
<a href="https://dribbble.com/jquintella" target="_blank">
<img class="i1" src="http://pluspng.com/img-png/dribbble-png-embed-dribbble-400.png">
</a>
body{
background-color:#F5F5F5;
}
.switch{
background-color:white;
width:30vw;
height:10vw;
position:absolute;
border-radius:30vw;
border:1vw solid #ccc;
cursor: pointer;
user-select: none;
display:inline-block;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
content:'';
width:10vw;
height:10vw;
background-color:white;
position:absolute;
border-radius:50%;
top:-10%;
left:-3%;
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
transform-origin: right center;
}
.switch::before{
border:1vw solid lightblue;
}
.switch::after{
background:#FBD3E1;
border:1vw solid pink;
}
input:checked + .switch:before {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid pink;
}
input + .switch .female{
color:pink;
}
input:checked + .switch .male{
color:lightblue;
}
input + .switch .male{
color:#ccc;
}
input:checked + .switch .female{
color:#ccc;
}
input:checked + .switch:after {
background: #D3F0FB;
transform: translateX(165%);
border:1vw solid lightblue;
}
.female, .male{
position:absolute;
font-weight:lighter;
color:#ccc;
}
.female{
z-index:-1;
top:13%;
left:2%;
transform:rotate(180deg);
font-size:10vw;
}
.male{
z-index:-1;
left:87%;
top:-145%;
font-size:10vw;
transform:rotate(-50deg);
}
a .i1{
width:10vh;
bottom:2%;
position:absolute;
right:3%;
text-decoration:none;
color:#ccc;
font-size:2vw;
animation:bounce 2s alternate infinite;
}
.i1{
opacity:0.5;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.