Safety Button

The second button toggles the safety of the first - just like a gun has a safety and a trigger.

by clayzermk1

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button class="btn btn-warning btn-unsafe disabled" type="button">Fire Ze Missiles!</button>
  <button class="btn btn-warning btn-safety" type="button"><i class="icon-unlock"></i></button>
</div>

CSS

body {
    margin: 20px;
}

i[class^='icon-'], i[class*=' icon-'] {
    display: inline-block;
    text-align: center;
    font-size: inherit;
    width: 16px;
}

.btn-safety > div {
    width: 150px;
}
.btn-safety > div:not(.hide) {
    display: inline-block;
}

JavaScript

$(document).on('click', '.btn-safety', function(e) {
    // Toggle the button color.
    $(e.currentTarget).parent().children().toggleClass('btn-warning btn-danger');
    
    // Toggle the text.
    $(e.currentTarget).siblings('.btn-unsafe').toggleClass('disabled');
    
    // Toggle the icon.
    $(e.currentTarget).find('i').toggleClass('icon-lock icon-unlock');
}).on('click', '.btn-unsafe:not(.disabled)', function(e) {
    // Optionally, reset the safety.
    $('.btn-safety').click();
    
    // Do something dangerous!
    alert("LAUNCH!!!");
});