"Button Switch"
Bootstrap 4.1.1 Snippet by Jaxier

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container mt-2">
<div class="row">
<!-- Small switch -->
<span class="switch switch-xs">
<input type="checkbox" class="switch" id="idChk-xs">
<label for="idChk-xs">Extreme Small switch</label>
</span>
</div>
<div class="row">
<!-- Small switch -->
<span class="switch switch-sm">
<input type="checkbox" class="switch" id="idChk-sm">
<label for="idChk-sm">Small switch</label>
</span>
</div>
<div class="row">
<!-- Normal switch -->
<span class="switch">
<input type="checkbox" class="switch" id="idChk-normal">
<label for="idChk-normal">Normal switch</label>
</span>
</div>
<div class="row">
<!-- Large switch -->
<span class="switch switch-lg">
<input type="checkbox" class="switch" id="idChk-lg">
<label for="idChk-lg">Large switch</label>
</span>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.switch {
}
.switch input[type=checkbox] {
display: none;
}
.switch input[type=checkbox] + label {
position:relative;
min-width:calc(calc(2.375rem * .8) * 2);
border-radius:calc(2.375rem * .8);
height:calc(2.375rem * .8);
line-height:calc(2.375rem * .8);
display:inline-block;
cursor:pointer;
outline:none;
user-select:none;
vertical-align:middle;
text-indent:calc(calc(calc(2.375rem * .8) * 2) + .5rem);
}
.switch input[type=checkbox] + label::before,
.switch input[type=checkbox] + label::after {
content:'';
position:absolute;
top:0;
left:0;
width:calc(calc(2.375rem * .8) * 2);
bottom:0;
display:block;
}
.switch input[type=checkbox] + label::before {
right:0;
background-color:#dee2e6;
border-radius:calc(2.375rem * .8);
transition:.2s all;
}
.switch input[type=checkbox] + label::after {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: