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.

Please show some code of what you have tried or what you have so far. — Mike, Sep 24 '12 at 15:09
http://jqueryui.com/demos/show/default.html Just include the scripts, and chose Highlight effect. — hjpotter92, Sep 24 '12 at 15:12
Depending on the level of sophistication you're looking for, the outline css command offers a low level alternative to multiple lines of jQuery. — Dom, Sep 24 '12 at 15:32

score 7 · Answer 1 · answered Sep 24 '12 at 15:12

7

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

The demo.

answered Sep 24 '12 at 15:12

xdazz

158,678
38
247
274

That's certainly an option for me. But I'd really like to make the border fade in and out too. – Urbycoz Sep 25 '12 at 07:30

Coby · Accepted Answer · 2012-09-24T15:45:17.437

7

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

edited Sep 24 '12 at 15:45

answered Sep 24 '12 at 15:32

Coby

1,528
9
8

Jan · Answer 3 · 2018-06-23T16:12:30.367

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

How can I highlight a button with jQuery?

3 Answers3