1/* Multiple Toggle Switch by Abu Shafiyya */
2
3fieldset {
4  border: 0;
5}
6
7/* Hide default radio */
8.radio input[type="radio"] {
9  position: absolute;
10  visibility: hidden;
11  display: none;
12  opacity: 0;
13  z-index: -1;
14}
15
16/* Customizing label */
17.radio label {
18  position: relative;
19  padding: 10px 20px 10px 25px;
20  cursor: pointer;
21  border-radius: 20px;
22  color: #2196F3;
23  margin: 0px 5px;
24  font-weight: 600;
25  text-transform: uppercase;
26}
27
28.radio label, .radio label::before {
29  -webkit-transition: .25s all ease;
30  transition: .25s all ease;
31}
32
33.radio label::before {
34  -webkit-box-sizing: border-box;
35  box-sizing: border-box;
36  content: " ";
37  position: absolute;
38  top: 30%;
39  left: 0;
40  width: 1em;
41  height: 1em;
42  border: 2px solid #2196F3;
43}
44
45.radio input[type="radio"] + label::before {
46  border-radius: 1em;
47}
48
49
50/* Checked toggle */
51.radio input[type="radio"]:checked + label {
52  color: #fff;
53  background: #2196F3;
54  z-index: 1;
55}
56
57.radio input[type="radio"]:checked + label {
58  padding: 10px 20px 10px 20px;
59}
60
61.radio input[type="radio"]:checked + label::before {
62  top: 4px;
63  width: 100%;
64  height: 2em;
65  z-index: -1;
66}
67
68.radio:hover input[type="radio"]:checked + label {
69  -webkit-box-shadow: #2195f338 0px 0px 0px 25px;
70  box-shadow: #2195f338 0px 0px 0px 25px;
71}