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