Posted By admin
Tags: ,
3D Buttons Effects
Demo

Gorgeous.,Amazing!! Thanks a lot!!,amazing !!,how to put glyphicon in an input class button?,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%); } }},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; },Muito bom, amigo! Obrigado!,I can’t stop pressing them,Pressing them listenning to Flux Pavillion – I Cant Stop,Click events seem to be finicky with these, sometimes the click events don’t fire. Any idea why?,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).,Dude…,Thanks!,damn good!!!,No calories but yummy!,really cool,Really good job, Magnifiqueeee !,Awesome! Thank you for sharing. :),This is awesome! Thanks for share!,The author is BhaumikPatel

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *