<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <p>Tweaking <a href="http://twitter.github.io/bootstrap/" target="_blank">Bootstrap <i class="icon-external-link"></i></a> buttons</p> <div class="btn-group btn-70px" data-toggle="buttons-radio"> <button class="btn active">Left</button> <button class="btn">Middle</button> <button class="btn last-child">Right</button> <div class="selector"></div> </div> <div class="btn-group btn-40px" data-toggle="buttons-radio"> <button class="btn"><i class="icon-align-left"></i></button> <button class="btn"><i class="icon-align-center"></i></button> <button class="btn active"><i class="icon-align-right"></i></button> <button class="btn last-child"><i class="icon-align-justify"></i></button> <div class="selector"></div> </div> <div class="btn-group btn-70px" data-toggle="buttons-checkbox"> <button class="active btn btn-on last-child"><i class="icon-star"></i></button> <div class="selector"></div> </div> <div class="btn-group btn-30px" data-toggle="buttons-radio"> <button class="btn btn-mini active btn-off">Off</button> <button class="btn btn-mini last-child">On</button> <div class="selector"></div> </div> <div class="btn-group btn-45px" data-toggle="buttons-radio"> <button class="btn btn-mini btn-off">Off</button> <button class="btn btn-mini active last-child">On</button> <div class="selector"></div> </div> <div class="btn-group btn-30px" data-toggle="buttons-radio"> <button class="btn btn-mini active btn-off"><i class="icon-pause"></i></button> <button class="btn btn-mini last-child"><i class="icon-play"></i></button> <div class="selector"></div> </div> </div>

@import "//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"; @import "//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"; p { margin: 40px 0 20px 0; } .btn-group { margin: 20px 40px 20px 0; } .selector { height: 5px; opacity: 0.85; background-color: #09f; top: -6px; left: 1px; position: relative; box-shadow: 0px -1px 1px #aaa, inset 0px 1px 2px rgba(242, 242, 242, 0.75), inset 0px -1px 1px rgba(0, 0, 0, 0.2); z-index: 20000; transition: left ease-in 0.2s; } .active.btn:nth-child(1) ~ .selector { border-bottom-left-radius: 3px; } .active.btn.last-child ~ .selector { border-bottom-right-radius: 3px; } .btn-group > .btn.last-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; } .btn-40px .active.btn:nth-child(10) ~ .selector { left: 352px; } .btn-40px .active.btn:nth-child(9) ~ .selector { left: 313px; } .btn-40px .active.btn:nth-child(8) ~ .selector { left: 274px; } .btn-40px .active.btn:nth-child(7) ~ .selector { left: 235px; } .btn-40px .active.btn:nth-child(6) ~ .selector { left: 196px; } .btn-40px .active.btn:nth-child(5) ~ .selector { left: 157px; } .btn-40px .active.btn:nth-child(4) ~ .selector { left: 118px; } .btn-40px .active.btn:nth-child(3) ~ .selector { left: 79px; } .btn-40px .active.btn:nth-child(2) ~ .selector { left: 40px; } .btn-40px .active.btn:nth-child(1) ~ .selector { left: 1px; } .btn-40px .selector { width: 38px; } .btn-40px .btn { width: 40px; } .btn-70px .active.btn:nth-child(10) ~ .selector { left: 622px; } .btn-70px .active.btn:nth-child(9) ~ .selector { left: 553px; } .btn-70px .active.btn:nth-child(8) ~ .selector { left: 484px; } .btn-70px .active.btn:nth-child(7) ~ .selector { left: 415px; } .btn-70px .active.btn:nth-child(6) ~ .selector { left: 346px; } .btn-70px .active.btn:nth-child(5) ~ .selector { left: 277px; } .btn-70px .active.btn:nth-child(4) ~ .selector { left: 208px; } .btn-70px .active.btn:nth-child(3) ~ .selector { left: 139px; } .btn-70px .active.btn:nth-child(2) ~ .selector { left: 70px; } .btn-70px .active.btn:nth-child(1) ~ .selector { left: 1px; } .btn-70px .selector { width: 68px; } .btn-70px .btn { width: 70px; } .btn-30px .active.btn:nth-child(10) ~ .selector { left: 262px; } .btn-30px .active.btn:nth-child(9) ~ .selector { left: 233px; } .btn-30px .active.btn:nth-child(8) ~ .selector { left: 204px; } .btn-30px .active.btn:nth-child(7) ~ .selector { left: 175px; } .btn-30px .active.btn:nth-child(6) ~ .selector { left: 146px; } .btn-30px .active.btn:nth-child(5) ~ .selector { left: 117px; } .btn-30px .active.btn:nth-child(4) ~ .selector { left: 88px; } .btn-30px .active.btn:nth-child(3) ~ .selector { left: 59px; } .btn-30px .active.btn:nth-child(2) ~ .selector { left: 30px; } .btn-30px .active.btn:nth-child(1) ~ .selector { left: 1px; } .btn-30px .selector { width: 28px; } .btn-30px .btn { width: 30px; } .btn-45px .active.btn:nth-child(10) ~ .selector { left: 397px; } .btn-45px .active.btn:nth-child(9) ~ .selector { left: 353px; } .btn-45px .active.btn:nth-child(8) ~ .selector { left: 309px; } .btn-45px .active.btn:nth-child(7) ~ .selector { left: 265px; } .btn-45px .active.btn:nth-child(6) ~ .selector { left: 221px; } .btn-45px .active.btn:nth-child(5) ~ .selector { left: 177px; } .btn-45px .active.btn:nth-child(4) ~ .selector { left: 133px; } .btn-45px .active.btn:nth-child(3) ~ .selector { left: 89px; } .btn-45px .active.btn:nth-child(2) ~ .selector { left: 45px; } .btn-45px .active.btn:nth-child(1) ~ .selector { left: 1px; } .btn-45px .selector { width: 43px; } .btn-45px .btn { width: 45px; } .btn-mini.active, .btn-mini.btn-on { line-height: 16px; padding-bottom: 4px; } .active.btn-off ~ .selector { background-color: #aaa; } .btn-on:not(.active) ~ .selector { background-color: #aaa; }