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).

Answer 2

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

The demo.

Answer 3

In 500ms with linear transition a class highlightButton (which adds the styling) will be added to the button. In the same way the class will be removed again.

Be sure to include jQuery and jQueryUI

More info on addClass and removeClass can be found here:
https://api.jquery.com/addclass/
https://api.jquery.com/removeclass/

Javascript:

$("#btnTest").addClass( "highlightButton", 500, "linear" ).removeClass("highlightButton",500,"linear");

CSS:

.highlightButton {
  border-color: red;
  color: red;
  font-weight: bold;
}

HTML:

<button type="button" class="btn btn-default" id="btnTest">test</button>

Live demo on Fiddle