"Twitter Bootstrap3 Slide Button (v0.1)"
Bootstrap 3.2.0 Snippet by myun2

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.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/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">
<h2>Twitter Bootstrap3 Slide Button (v0.1)</h2>
<p>This button <strong>slide</strong> to right if when <strong>clicked.</strong></p>
<div class='slide-button'>
<div class='btn btn-danger btn-small' data-toggle='button'>destroy</div>
</div>
<div class='slide-button'>
<div class='btn btn-danger btn-small active' data-toggle='button'>destroy</div>
</div>
<p>And once more clicked <strong>slide to left</strong></p>
<h2>How to Use?</h2>
<p>To need slide button enclosed by <code>.slide-button</code> class.</p>
<p>And set attribute of <code>data-toggle="button"</code> to the button.</p>
<p>for Example code is</p>
<xmp>
<div class="slide-button">
<div class="btn btn-danger btn-small" data-toggle="button">destroy</div>
</div>
</xmp>
<p>And please copy **CSS code** to your application stylesheet.</p>
<p>And sorry... Please <strong>Adjust a few Positioning of Stylesheet</strong> code...</p>
<xmp>
.slide-button {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.slide-button {
background-color: #464646;
width: 124px; /* TODO Me Change! */
margin: 6px 0px 16px;
border-radius: 4px;
height: 34px;
box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3);
}
.slide-button .btn {
margin: 0px;
float: none;
transition-duration: 0.35s;
}
.slide-button .active:before {
float: left;
content: "";
}
.slide-button .btn.active {
margin-left: 51px; /* TODO Me Change! */
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.245);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: