1.switch {
2 position: relative;
3 display: inline-block;
4 width: 120px;
5 height: 34px;
6}
7
8.switch input {
9 display: none;
10}
11
12.slider {
13 position: absolute;
14 cursor: pointer;
15 top: 0;
16 left: 0;
17 right: 0;
18 bottom: 0;
19 background-color: #3C3C3C;
20 -webkit-transition: .4s;
21 transition: .4s;
22 border-radius: 34px;
23}
24
25.slider:before {
26 position: absolute;
27 content: "";
28 height: 26px;
29 width: 26px;
30 left: 4px;
31 bottom: 4px;
32 background-color: white;
33 -webkit-transition: .4s;
34 transition: .4s;
35 border-radius: 50%;
36}
37
38input:checked + .slider {
39 background-color: #0E6EB8;
40}
41
42input:focus + .slider {
43 box-shadow: 0 0 1px #2196F3;
44}
45
46input:checked + .slider:before {
47 -webkit-transform: translateX(26px);
48 -ms-transform: translateX(26px);
49 transform: translateX(85px);
50}
51
52/*------ ADDED CSS ---------*/
53.slider:after {
54 content: 'DISABLED';
55 color: white;
56 display: block;
57 position: absolute;
58 transform: translate(-50%,-50%);
59 top: 50%;
60 left: 50%;
61 font-size: 10px;
62 font-family: Verdana, sans-serif;
63}
64
65input:checked + .slider:after {
66 content: 'ENABLED';
67}
68
69/*--------- END --------*/