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.

Chessman

Please show some code of what you have tried or what you have so far. – Abdul

jqueryui.com/demos/show/default.html Just include the scripts, and chose Highlight effect. – Zweig

Depending on the level of sophistication you're looking for, the outline css command offers a low level alternative to multiple lines of jQuery. – Qualify

Answer 1

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

Reprisal

Answer 2

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

The demo.

Marcille

That's certainly an option for me. But I'd really like to make the border fade in and out too. – Chessman

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

Ronel