Emoticon Toggle Using a Checkbox | Pure CSS

<input type="checkbox">

Styling the body:

We use the whole document’s body as a container to center the checkbox. Therefore we set the height and width of the body to 100vh and 100vw, respectively. We center the checkbox with the flex layout. Finally, we assign a dark blue color with hex code #000022 to the body.

body{
   height: 100vh;
   width: 100vw;
   padding: 0;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #000022;
}

Hiding the Checkbox:

Before we create a toggle switch, we need to hide our original checkbox. For this, we use the ‘appearance’ property. Here it should be noted that this property is available as WebKit and Moz. Therefore this may cause compatibility issues in older browsers. After that, we set the height of the checkbox to 80px and width to 180px. We use white as background-color for this toggle. Now we make the corners smooth by rounding them using border-radius. If you observe, a blue outline appears every time you click the checkbox. To get rid of this blue outline, we assign a value of none to outline. Lastly, to indicate that the toggle is clickable, we use the cursor property. Here we set it to ‘pointer’.

input[type="checkbox"]{
    position: relative;
    width: 180px;
    height: 80px;
    outline: none;
    -webkit-appearance:none;
    background-color: white;
    border-radius: 50px;
    cursor: pointer;
}

Creating the Emoticons:

Next, we use ‘:before’ and ‘:after’ pseudo-elements to create the emoticon.
First, we create the face and eyes using the ‘:before’ element. We start by creating the left eye. It has a height and width of 10px and a border-radius of 50% to make it a perfect circle. Position it absolutely and set z-index to 0. We use a box-shadow with the spread parameter set to 0 to create the right eye. The box-shadow with a spread parameter of 25px shapes the face. This box-shadow has a bright yellow color with hex code #ffc21a. The transitions should be smooth; hence, we set the transition duration to 0.5s.

input[type="checkbox"]:before{
    position: absolute;
    content: "";
    background-color: white;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    top:30px;
    left: 20px;
    z-index: 0;
    box-shadow: 26px 0px 0 0px white,
		13px 5px 0 25px #ffc21a;
    transition:0.5s;
}

Creating the Smile:

Next, we create the smile using the ‘:after’ pseudo-element. Each of these pseudo-elements should have a content attribute for proper functioning. We create a rectangle with dimensions 13*28px and add border-radius of 28px to the left-bottom and right-bottom corner. Similar to the ‘:before’ pseudo-element, we add a transition duration of 0.5s.

input[type="checkbox"]:after{
    position: absolute;
    content: "";
    background-color: white;
    height: 13px;
    width: 28px;
    top:45px;
    left: 24px;
    border-radius: 0 0 28px 28px;
    transition:0.5s;
}

Adding an Onclick event:

Right now, That is in the unchecked state the emoticon is happy. But once the user checks the checkbox, the emoticon is changed to sad. We use the same pseudo-elements to create the sad emoticon too. When the user clicks on the checkbox, the box-shadow of ‘:before’ element earlier with a background-color #ffc21a gets changed to blue with hex-code #2da3d2. Also, the emoticon moves towards the right by 105 px.

The mouth still looks like a smile. We shape that into a frown by setting the border-radius of 28px to top-left and top-right corners. On click, the mouth too should move to the right along with the eyes and face. We hence use translateX to move the emoticon towards the right. We have created the sad emoticon too.

input:checked[type="checkbox"]:before{
    box-shadow: 26px 0px 0 0px white,
		13px 5px 0 25px #2da3d2;
    transform: translateX(105px);
}

input:checked[type="checkbox"]:after{
    border-radius: 28px 28px 0 0;
    transform: translateX(105px);
}