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.
DEMO — Outer glow using CSS3 box-shadow and animation (using -moz
and -webkit
vendor prefixes).