Digital

Bootstrap 3D Buttons

Brandon Himpfen

Brandon Himpfen

— 1 min read
Bootstrap 3D Buttons
Photo by Fotis Fotopoulos / Unsplash

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.

This is what the Twitter Bootstrap 3D buttons will look like in this end:

The CSS

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, .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>

Read more