<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);} 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.