Bootstrap 3D Buttons

By default, Twitter’s Bootstrap employs a flat website design. There is nothing wrong with this but you may want to add a little something to certain elements of your website. In this code snippet, I’m going to show you how-to add a shadow to your buttons to make them look 3D.


Add the following to you CSS file.

.btn { border: 0; border-bottom: 0; border-left: 0; box-shadow: inset 0 -3.2px rgba(0, 0, 0, 0.12), inset 2px 0 rgba(0, 0, 0, 0.1); outline: none; -webkit-outline: none; -o-outline: none; -moz-outline: none; } .btn:active, { outline: none; -moz-outline: none; background-image: none; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important; position: relative; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important; top: 1px; left: -1px; } .btn:focus { outline: none; -webkit-outline: none; -moz-outline: none; } .btn-sm { padding-top: 1.5px; }

As you can see, we are using four (4) CSS classes. The reason why we are adding padding to the top of the small button .btn-sm, is because the shadow will be inside the button and therefore shrink the button, only in appearance.

How-to Add To Your Website

Once you’ve added the CSS to your CSS file, any HTML element that using the .btn class will automatically be updated. If you have not created a button, you can do so like this:

<a href="" title="" class="btn btn-default">Default</a>

Or as a button:

<button type="button" class="btn btn-default">Default</button>