"Trendy Shadow Buttons"
Bootstrap 3.0.0 Snippet by StartBootstrap

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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:

uh i love them... just implemented it :DD

Uli Worm () - 9 years ago - Reply 0

If you want to make these a bit more trendy you can change the shadow color on each of the respective buttons to match the button color. This will add a bit more style to the snippet.

Start Bootstrap () - 10 years ago - Reply 0

One does not approve, off with his head.

Elizabeth Windsor () - 10 years ago - Reply 0


Anne Boleyn () - 10 years ago - Reply 0

What are you guys talking about?! I think these are great, we'll be using them on the new number10.gov site!

David Cameron () - 10 years ago - Reply 0

Eurgh, these are rather ugly friend.... far from trendy

John Major () - 10 years ago - Reply 0

Yes, I must concur, pretty poor

Nick Clegg () - 10 years ago - Reply 0