"Easy Switch Button"
Bootstrap 3.0.3 Snippet by yocoke

Post to Facebook Tweet this

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="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" style="margin-top:20px;">
<div class="row">
<div class="col-md-5">
<div class="btn-group" id="status" data-toggle="buttons">
<label class="btn btn-default btn-on btn-xs active">
<input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label>
<label class="btn btn-default btn-off btn-xs ">
<input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label>
</div>
<div class="btn-group" id="status" data-toggle="buttons">
<label class="btn btn-default btn-on btn-sm active">
<input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label>
<label class="btn btn-default btn-off btn-sm ">
<input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label>
</div>
<div class="btn-group" id="status" data-toggle="buttons">
<label class="btn btn-default btn-on active">
<input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label>
<label class="btn btn-default btn-off">
<input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label>
</div>
<div class="btn-group" id="status" data-toggle="buttons">
<label class="btn btn-default btn-on btn-lg active">
<input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label>
<label class="btn btn-default btn-off btn-lg">
<input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label>
</div>
</div>
</div>
<div class="row" style="margin-top:20px">
<div class="col-md-5">
<div class="btn-group" id="status" data-toggle="buttons">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Switch button */
.btn-default.btn-on.active{background-color: #5BB75B;color: white;}
.btn-default.btn-off.active{background-color: #DA4F49;color: white;}
.btn-default.btn-on-1.active{background-color: #006FFC;color: white;}
.btn-default.btn-off-1.active{background-color: #DA4F49;color: white;}
.btn-default.btn-on-2.active{background-color: #00D590;color: white;}
.btn-default.btn-off-2.active{background-color: #A7A7A7;color: white;}
.btn-default.btn-on-3.active{color: #5BB75B;font-weight:bolder;}
.btn-default.btn-off-3.active{color: #DA4F49;font-weight:bolder;}
.btn-default.btn-on-4.active{background-color: #006FFC;color: #5BB75B;}
.btn-default.btn-off-4.active{background-color: #DA4F49;color: #DA4F49;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard
Hexa shape button
Material Design Switch
Easy Table Filter

Questions / Comments: