3D Bootstrap Buttons

Make fully-animated 3D Bootstrap buttons using CSS.

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<button class="btn btn-primary btn-lg" type="button">Flat Button</button>
<hr />
<button class="btn btn3d btn-primary btn-lg" type="button">3D Button</button>

CSS

.btn3d {
    transition: all .08s linear;
    position: relative;
    outline: medium none;
    -moz-outline-style: none;
    border: 0px;
    margin-top: 15px;
    top: 0;
}
.btn3d:focus {
    outline: medium none;
    -moz-outline-style: none;
}
.btn3d:active {
    top: 9px;
}
.btn3d.btn-default {
    box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-primary {
    box-shadow: 0 0 0 1px #428bca inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #357ebd, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-success {
    box-shadow: 0 0 0 1px #5cb85c inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4cae4c, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-info {
    box-shadow: 0 0 0 1px #5bc0de inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #46b8da, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-warning {
    box-shadow: 0 0 0 1px #f0ad4e inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #eea236, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d.btn-danger {
    box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #c24032, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn3d:active.btn-default {
    box-shadow: none;
}
.btn3d:active.btn-primary {
    box-shadow: none;
}
.btn3d:active.btn-success {
    box-shadow: none;
}
.btn3d:active.btn-info {
    box-shadow: none;
}
.btn3d:active.btn-warning {
    box-shadow: none;
}
.btn3d:active.btn-danger {
    box-shadow: none;
}