Here's a LESS mixin that worked nicely for me:
.3d-buttons(@color, @background, @text-shadow: none) {
transition: all .08s linear;
position: relative;
outline: medium none;
-moz-outline-style: none;
border: 0px;
top: 0;
color: @color;
#gradient > .vertical(lighten(@background, 5%), darken(@background, 5%), 0%, 100%);
border-color: darken(@background, 10%);
border-bottom-color: darken(@background, 20%);
text-shadow: @text-shadow;
box-shadow:0 0 0 1px darken(@background, 15%), 0 0 0 2px rgba(255,255,255,0.15) inset, 0 6px 0 0 darken(@background, 20%), 0 6px 0 1px rgba(0,0,0,0.4), 0 4px 4px 1px rgba(0,0,0,0.5);
&:hover,
&:focus,
&:active,
&.active {
#gradient > .vertical(darken(@background, 0), darken(@background, 10%), 0%, 100%);
border-color: darken(@background, 20%);
color: @color;
}
&:active {
top: 5px;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: darken(@background, 5%);
}
}
}
chris () - 11 years ago - Reply 0
Here's how you can make these buttons work in tandem with Bootstrap 3's standard buttons:
JSFiddle:
http://jsfiddle.net/travisl...
HTML:
<button type="button" class="btn btn3d btn-primary btn-lg">3D Button</button>
<button type="button" class="btn btn-primary btn-lg">Flat Button</button>
CSS:
.btn3d { transition: all .08s linear; position: relative; outline: medium none; -moz-outline-style: none; border: 0px; margin-right: 10px; 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; }
Travis Layne () - 11 years ago - Reply 0
Click events seem to be finicky with these, sometimes the click events don't fire. Any idea why?
Nate () - 11 years ago - Reply 0
Just guessing, but it might have to do with the button moving. If the mousedown event happens on the button, but the button moves out from underneath the mouse, then the mouseup happens outside of the button, the onclick event isn't fired (the mousedown and mouseup didn't happen on the same element).
Jimbo Slice () - 11 years ago - Reply 0
