Switch by prashantj510

1.toggle-button-cover {
2  display: table-cell;
3  position: relative;
4  width: 150px;
5  height: 140px;
6  box-sizing: border-box;
7}
8
9.button-cover {
10  height: 100px;
11  margin: 20px;
12  background-color: #fff;
13  box-shadow: 0 10px 20px -8px #c5d6d6;
14  border-radius: 4px;
15}
16
17.button-cover:before {
18  counter-increment: button-counter;
19  content: counter(button-counter);
20  position: absolute;
21  right: 0;
22  bottom: 0;
23  color: #d7e3e3;
24  font-size: 12px;
25  line-height: 1;
26  padding: 5px;
27}
28
29.button-cover,
30.knobs,
31.layer {
32  position: absolute;
33  top: 0;
34  right: 0;
35  bottom: 0;
36  left: 0;
37}
38
39.button {
40  position: relative;
41  top: 50%;
42  width: 74px;
43  height: 36px;
44  margin: -20px auto 0 auto;
45  overflow: hidden;
46}
47
48.checkbox {
49  position: relative;
50  width: 100%;
51  height: 100%;
52  padding: 0;
53  margin: 0;
54  opacity: 0;
55  cursor: pointer;
56  z-index: 3;
57}
58
59.knobs {
60  z-index: 2;
61}
62
63.layer {
64  width: 100%;
65  background-color: #ebf7fc;
66  transition: 0.3s ease all;
67  z-index: 1;
68}
69
70.button.r,
71.button.r .layer {
72  border-radius: 100px;
73}
74
75#button-3 .knobs:before {
76  content: "°C";
77  position: absolute;
78  top: 4px;
79  left: 4px;
80  width: 20px;
81  height: 10px;
82  color: #fff;
83  font-size: 12px;
84  font-weight: bold;
85  text-align: center;
86  line-height: 1;
87  padding: 9px 4px;
88  background-color: #1c739b;
89  border-radius: 50%;
90  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
91}
92
93#button-3 .checkbox:active + .knobs:before {
94  width: 46px;
95  border-radius: 100px;
96}
97
98#button-3 .checkbox:checked:active + .knobs:before {
99  margin-left: -26px;
100}
101
102#button-3 .checkbox:checked + .knobs:before {
103  content: "°F";
104  left: 42px;
105  background-color: #b6413b;
106}
107
108#button-3 .checkbox:checked ~ .layer {
109  background-color: #fcebeb;
110}