css-switcher/switcher.css at master · peantunes/css-switcher · GitHub

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
.switch-control{
  margin:auto;
}

.switch-control input{
  display: none;
}

.switch-control div.switch-content{
  width:80px;
  height:40px;
  margin:auto;
  border-radius: 20px 20px;
  background-color: #CCC;

  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}


.switch-control div.switch-switcher{
  width:40px;
  height:40px;
  margin-left:0px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px #666;
  background-color: #FFF;
  border:1px solid #AAA;

  transition-property: margin-left;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

.switch-control input:checked + div.switch-content{
  background-color: #0082C1;
}
.switch-control input:checked + div.switch-content div.switch-switcher{
  margin-left:40px;
}