"3D Buttons Effects"
Bootstrap 3.0.0 Snippet by BhaumikPatel

<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; }

Similar snippets: See More


Comments:

Jean Brito 2013-11-11 19:17:42
    This is awesome! Thanks for share!
Alex 2013-11-12 07:33:31
    Awesome! Thank you for sharing. :)
lakim 2013-11-12 09:25:13
    Really good job, Magnifiqueeee !
jdorfman 2013-11-12 21:54:22
    really cool
Kimmo Kivelä 2013-11-14 19:08:14
    No calories but yummy!
Nino 2013-11-15 22:11:05
    damn good!!!
Travis Layne 2013-11-24 00:34:06
    Dude...
maxsurguy 2013-11-24 01:56:02
    Thanks!
Nate 2013-11-25 21:43:12
    Click events seem to be finicky with these, sometimes the click events don't fire. Any idea why?
Jimbo Slice 2013-12-10 14:42:14
    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).
Roderick Silva 2013-12-03 16:24:35
    I can't stop pressing them
Phedmon 2014-07-16 09:31:25
    Pressing them listenning to
Flux Pavillion – I Cant Stop
Travis Layne 2013-12-03 19:50:41
    Here's how you can make these buttons work in tandem with Bootstrap 3's standard buttons:
Raul Abreu Leite 2013-12-12 14:04:33
    Muito bom, amigo! Obrigado!
chris 2013-12-16 17:12:31
    Here's a LESS mixin that worked nicely for me:
Adrian Arcay 2013-12-17 18:55:41
    how to put glyphicon in an input class button?
z4ki 2014-04-05 23:27:15
    amazing !!
louli 2014-04-09 11:33:10
    Amazing!! Thanks a lot!!
astralislux 2014-05-09 10:53:48
    Gorgeous.

Commenting will be back soon.