How can I highlight a button with jQuery?

Question

I need to draw the user's attention to a button at a certain point while using my page.

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

Ideally I'd like the button to "glow". i.e. Have a border around it that fades in, then fades out a second later.

I've tried using box-shadow to achieve the glow effect 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 figure out how to make it fade in and out. Also, it doesn't seem to work in IE8.

I know jQuery is normally great for these kind of effects, but so far I've not come across anything suitable.

Answer 1

DEMO — Outer glow using CSS3 box-shadow and animation (using -moz and -webkit vendor prefixes).