"3D Buttons Effects"
Bootstrap 3.0.0 Snippet by BhaumikPatel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>CSS3 3D Button Effects</h2> <!-- Standard button --> <button type="button" class="btn3d btn btn-default btn-lg"><span class="glyphicon glyphicon-download-alt"></span> Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary btn-lg btn3d"><span class="glyphicon glyphicon-cloud"></span> Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success btn-lg btn3d"><span class="glyphicon glyphicon-ok"></span> Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info btn-lg btn3d"><span class="glyphicon glyphicon-question-sign"></span> Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning btn-lg btn3d"><span class="glyphicon glyphicon-warning-sign"></span> Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger btn-lg btn3d"><span class="glyphicon glyphicon-remove"></span> Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <a href="http://www.jquery2dotnet.com/" class="btn btn-link btn-lg btn3d" role="button"><span class="glyphicon glyphicon-globe"></span> Link</a> <p> <button type="button" class="btn btn-primary btn-lg btn3d"><span class="glyphicon glyphicon-thumbs-up"></span></button> <button type="button" class="btn btn-danger btn-lg btn3d"><span class="glyphicon glyphicon-off"></span></button> </p> <p> <button type="button" class="btn btn-primary btn-lg btn3d">Large button</button> <button type="button" class="btn btn-default btn-lg btn3d">Large button</button> </p> <p> <button type="button" class="btn btn-primary btn3d">Default button</button> <button type="button" class="btn btn-default btn3d">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm btn3d">Small button</button> <button type="button" class="btn btn-default btn-sm btn3d">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs btn3d">Extra small button</button> <button type="button" class="btn btn-default btn-xs btn3d">Extra small button</button> </p> </div> </div>
.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; }

Related: See More


Questions / Comments:

Gorgeous.

astralislux () - 4 years ago - Reply 0


Amazing!! Thanks a lot!!

louli () - 4 years ago - Reply 0


amazing !!

z4ki () - 4 years ago - Reply 0


how to put glyphicon in an input class button?

Adrian Arcay () - 4 years ago - Reply 0


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 () - 4 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 () - 4 years ago - Reply 0


Muito bom, amigo! Obrigado!

Raul Abreu Leite () - 4 years ago - Reply 0


I can't stop pressing them

Roderick Silva () - 4 years ago - Reply 0


Pressing them listenning to
Flux Pavillion – I Cant Stop

Phedmon () - 4 years ago - Reply 0


Click events seem to be finicky with these, sometimes the click events don't fire. Any idea why?

Nate () - 4 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 () - 4 years ago - Reply 0


Dude...

Travis Layne () - 4 years ago - Reply 0


Thanks!

maxsurguy () - 4 years ago - Reply 0


damn good!!!

Nino () - 4 years ago - Reply 0


No calories but yummy!

Kimmo Kivelä () - 4 years ago - Reply 0


really cool

jdorfman () - 4 years ago - Reply 0


Really good job, Magnifiqueeee !

lakim () - 4 years ago - Reply 0


Awesome! Thank you for sharing. :)

Alex () - 4 years ago - Reply 0


This is awesome! Thanks for share!

Jean Brito () - 4 years ago - Reply 0