"Trendy Shadow Buttons"
Bootstrap 3.3.0 Snippet by Mohan.P

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

Related: See More


Questions / Comments: