Skip to content

Instantly share code, notes, and snippets.

@jochemstoel
Created July 22, 2015 08:36
Show Gist options
  • Save jochemstoel/481c9f9aeca53d457b65 to your computer and use it in GitHub Desktop.
Save jochemstoel/481c9f9aeca53d457b65 to your computer and use it in GitHub Desktop.
3d buttons bootstrap
.btn3d {
transition:all .08s linear;
position:relative;
outline:medium none;
-moz-outline-style:none;
border:0px;
margin-right:10px;
margin-top:15px;
}
.btn3d:focus {
outline:medium none;
-moz-outline-style:none;
}
.btn3d:active {
top:9px;
}
.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);
background-color:#fff;
}
.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);
background-color:#428bca;
}
.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);
background-color:#5cb85c;
}
.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);
background-color:#5bc0de;
}
.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);
background-color:#f0ad4e;
}
.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);
background-color:#c63702;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment