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

<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>
.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); }

Related: See More


Questions / Comments: