<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 {
width: 124px; /* TODO Me Change! */
:
.slide-button .btn.active {
margin-left: 51px; /* TODO Me Change! */
:
</xmp>
<p>This code correct needed when if your button width. Sorry...</p>
</div>
