Switch by elijahgummer

1.checkbox {
2  --blue: #0d7eff;
3  --g08: #e1e5eb;
4  --g04: #848ea1;
5  text-align: center;
6}
7
8.checkbox .tgl {
9  display: none;
10}
11.checkbox .tgl,
12.checkbox .tgl:after,
13.checkbox .tgl:before,
14.checkbox .tgl *,
15.checkbox .tgl *:after,
16.checkbox .tgl *:before,
17.checkbox .tgl + .tgl-btn {
18  box-sizing: border-box;
19}
20.checkbox .tgl::selection,
21.checkbox .tgl:after::selection,
22.checkbox .tgl:before::selection,
23.checkbox .tgl *::selection,
24.checkbox .tgl *:after::selection,
25.checkbox .tgl *:before::selection,
26.checkbox .tgl + .tgl-btn::selection {
27  background: none;
28}
29.checkbox .tgl + .tgl-btn {
30  outline: 0;
31  display: block;
32  width: 57px;
33  height: 27px;
34  position: relative;
35  cursor: pointer;
36  user-select: none;
37  font-size: 12px;
38  font-weight: 400;
39  color: #fff;
40}
41.checkbox .tgl + .tgl-btn:after,
42.checkbox .tgl + .tgl-btn:before {
43  position: relative;
44  display: block;
45  content: "";
46  width: 44%;
47  height: 100%;
48}
49.checkbox .tgl + .tgl-btn:after {
50  left: 0;
51}
52.checkbox .tgl + .tgl-btn:before {
53  display: inline;
54  position: absolute;
55  top: 7px;
56}
57.checkbox .tgl:checked + .tgl-btn:after {
58  left: 56.5%;
59}
60
61.checkbox .tgl + .tgl-btn {
62  background: var(--g08);
63  border-radius: 20rem;
64  padding: 2px;
65  transition: all 0.4s ease;
66  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
67}
68.checkbox .tgl + .tgl-btn:after {
69  border-radius: 2em;
70  background: #fff;
71  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
72    padding 0.3s ease, margin 0.3s ease;
73  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
74}
75.checkbox .tgl + .tgl-btn:before {
76  content: "No";
77  left: 28px;
78  color: var(--g04);
79  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
80}
81.checkbox .tgl + .tgl-btn:active {
82  box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
83}
84.checkbox .tgl + .tgl-btn:active:after {
85  padding-right: 0.4em;
86}
87.checkbox .tgl:checked + .tgl-btn {
88  background: var(--blue);
89}
90.checkbox .tgl:checked + .tgl-btn:active {
91  box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
92}
93.checkbox .tgl:checked + .tgl-btn:active:after {
94  margin-left: -0.4em;
95}
96.checkbox .tgl:checked + .tgl-btn:before {
97  content: "Yes";
98  left: 4px;
99  color: #fff;
100}
101