<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">
<div class="row">
<div class="col-lg-12">
<h2>Try clicking on the buttons below!</h2>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
</div>
<div class="col-lg-12">
<h4>Snippet by <a target="_blank" href="http://startbootstrap.com">Start Bootstrap</a> - A library of free and open-source HTML starter templates for Bootstrap 3.</h4>
</div>
</div>
</div>
/* Each button has the same black, 30% opacity shadow. You can style them individually if you wish! */
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
-webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
}
.btn-default:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active {
margin-top: 3px;
margin-bottom: -3px;
}
