glow button onfocus

i want button to have glow effect when selected by tab key. can any o开发者_C百科ne help me with this. code snippet will be very helpful.

thanks rashmi

if you're developing for modern browsers you can use the html5 box shadow and transition:

button{
 background:#000;   
 color:#fff;
 border:none;
 transition:box-shadow .3s linear;
 -moz-transition:-moz-box-shadow .3s linear;
 -webkit-transition:-webkit-box-shadow .3s linear;
}
button:hover,button:focus{
 box-shadow:0px 0px 15px #fff;
 -moz-box-shadow:0px 0px 15px #fff;
 -webkit-box-shadow:0px 0px 15px #fff;   
}

demo: http://www.jsfiddle.net/ybHUy/

You don't need JQuery for this.

#yourButtonId:focus {
    -moz-box-shadow: 5px 5px 5px #fff;
    -webkit-box-shadow: 5px 5px 5px #fff;
    box-shadow: 5px 5px 5px #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)";
    filter: progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5);
}

Note that I'd put the MSIE equivalents in a conditional comment on a real site so that when IE9 supports box-shadow it won't use the filter fallbacks.

Not all browsers support html5 animations but you could have a look at http://colorpowered.com/blend/ .

The JQuery for it can be:

$(document).ready(function () {
    $('#yourButtonId')
        .focus(function () {
            $(this).addClass('yourGlowClass');
        })
        .blur(function () {
            $(this).removeClass('yourGlowClass');
        });
});

A demo of the JQuery: http://www.jsfiddle.net/S2H2R/3/.

I'm not 100% sure about the CSS Filter, but there's an tutorial on the CSS Filter, including glow, which should be useful for the class to store in your css file.

How about this ? YUI http://developer.yahoo.com/yui/examples/button/btn_example13.html