1/* The switch - the box around the slider */
2.switch {
3 font-size: 15px;
4 position: relative;
5 display: inline-block;
6 width: 4.5em;
7 height: 2em;
8}
9
10/* Hide default HTML checkbox */
11.switch input {
12 background-color: transparent;
13 opacity: 0;
14 width: 0;
15 height: 0;
16}
17
18/* The slider */
19.slider {
20 position: absolute;
21 cursor: pointer;
22 top: 0;
23 left: 0;
24 right: 0;
25 bottom: 0;
26 background-image: linear-gradient(120deg,#234567,#781223);
27 transition: .4s;
28 border-top-left-radius: 13px;
29 border-bottom-right-radius: 13px;
30}
31
32.slider:before {
33 position: absolute;
34 content: "";
35 height: 1.4em;
36 width: 1.4em;
37 border-top-left-radius: 11px;
38 border-bottom-right-radius: 11px;
39 left: 0.3em;
40 bottom: 0.3em;
41 background-color: #dde4eb;
42 transition: .4s;
43}
44
45input:checked + .slider {
46 background-color: transparent;
47}
48
49input:checked + .slider:before {
50 transform: translateX(2.5em);
51}