How can I highlight a button using jQuery?

Question

I need to draw the user's attention to the button at some point when using my page.

<button id="btnSubmit" style="float:left;width:78px;">Submit</button> 

Ideally, I would like the button to glow. that is, the border around it that fades, then disappears after a second.

I tried using the shadow for the shadows to achieve the glow effect that I want.

 .boxShadowed{ font-weight:bold; -moz-box-shadow:0px 0px 10px 7px #777777; -webkit-box-shadow:0px 0px 10px 7px #777777; box-shadow:0px 0px 10px 7px #777777; } 

But I can’t understand how to make it disappear and disappear. Also, it does not work in IE8.

I know that jQuery is usually great for this kind of effects, but so far I have not seen anything suitable.

Answer 1

DEMO - External glow using CSS3 shadow and animation (using -moz and -webkit vendor prefixes).

Answer 2

 $('button').effect( "highlight", {color: 'red'}, 3000 ); 

Demonstration.