switch_on

How to create an animated switch checkbox using HTML and CSS

Spread the love

Hello, today I will be discussing on how to create an animated switch checkbox using HTML and CSS. Checkboxes are used where we want to provide the user with the option of select/unselect or on/off or yes/no or true/false and similar cases. A normal checkbox generally looks like a tick inside the box. However, by applying styles on the checkbox, we can provide it with amazing looks and effects, which is what is shown below.

Following is the css that will be used on the html checkbox (input type=checkbox) to create the animated switch checkbox:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
html {
            background-color: #e4ded4;
            background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
            box-shadow: inset 0 0 100px hsla(0,0%,0%,.1);
            height: 100%;
        }
 
        input[type="checkbox"] {
            background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
            background-size: 100% 100%, 200% 100%;
            background-position: 0 0, 15px 0;
            border-radius: 25px;
            box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5), inset 0 0 10px hsla(0,0%,0%,.5), 0 0 0 1px hsla(0,0%,0%,.1), 0 -1px 2px 2px hsla(0,0%,0%,.25), 0 2px 2px 2px hsla(0,0%,100%,.75);
            cursor: pointer;
            height: 25px;
            left: 50%;
            margin: -12px -37px;
            padding-right: 25px;
            position: absolute;
            top: 50%;
            width: 75px;
            -webkit-appearance: none;
            -webkit-transition: .25s;
        }
 
            input[type="checkbox"]:after {
                background-color: #eee;
                background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
                border-radius: 25px;
                box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1), inset 0 -1px 1px 1px hsla(0,0%,0%,.25), 0 1px 3px 1px hsla(0,0%,0%,.5), 0 0 2px hsla(0,0%,0%,.25);
                content: '';
                display: block;
                height: 25px;
                left: 0;
                position: relative;
                top: 0;
                width: 50px;
            }
 
            input[type="checkbox"]:checked {
                background-position: 0 0, 35px 0;
                padding-left: 25px;
                padding-right: 0;
            }

And following is the complete code to create the animated switch checkbox:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<head>
    <style>
        html {
            background-color: #e4ded4;
            background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
            box-shadow: inset 0 0 100px hsla(0,0%,0%,.1);
            height: 100%;
        }
 
        input[type="checkbox"] {
            background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
            background-size: 100% 100%, 200% 100%;
            background-position: 0 0, 15px 0;
            border-radius: 25px;
            box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5), inset 0 0 10px hsla(0,0%,0%,.5), 0 0 0 1px hsla(0,0%,0%,.1), 0 -1px 2px 2px hsla(0,0%,0%,.25), 0 2px 2px 2px hsla(0,0%,100%,.75);
            cursor: pointer;
            height: 25px;
            left: 50%;
            margin: -12px -37px;
            padding-right: 25px;
            position: absolute;
            top: 50%;
            width: 75px;
            -webkit-appearance: none;
            -webkit-transition: .25s;
        }
 
            input[type="checkbox"]:after {
                background-color: #eee;
                background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
                border-radius: 25px;
                box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1), inset 0 -1px 1px 1px hsla(0,0%,0%,.25), 0 1px 3px 1px hsla(0,0%,0%,.5), 0 0 2px hsla(0,0%,0%,.25);
                content: '';
                display: block;
                height: 25px;
                left: 0;
                position: relative;
                top: 0;
                width: 50px;
            }
 
            input[type="checkbox"]:checked {
                background-position: 0 0, 35px 0;
                padding-left: 25px;
                padding-right: 0;
            }
    </style>
</head>
<body>
    <input type="checkbox">
</body>
</html>

Following is how the animated switch checkbox will look like:

Switch Off:
switch_off

Switch On:
switch_on


Leave a Reply

Your email address will not be published. Required fields are marked *