¿Cómo puedo resaltar un botón con jQuery?

Necesito llamar la atención del usuario sobre un botón en cierto punto mientras uso mi página.¿Cómo puedo resaltar un botón con jQuery?

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

Idealmente me gustaría que el botón "brille". es decir, tiene un borde alrededor que se desvanece, luego se desvanece un segundo más tarde.

He intentado usar box-shadow para lograr el efecto de brillo que quiero.

.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; 
}

Pero no sé cómo hacer que se desvanezca y desaparezca. Además, no parece funcionar en IE8.

Sé que jQuery es normalmente ideal para este tipo de efectos, pero hasta ahora no he encontrado nada adecuado.

Fuente

2012-09-24 Urbycoz

Por favor, muestre un código de lo que ha intentado o lo que tiene hasta ahora. – Mike

http://jqueryui.com/demos/show/default.html Solo incluya los scripts y elija el efecto Destacar. – hjpotter92

Dependiendo del nivel de sofisticación que esté buscando, el comando outline css ofrece una alternativa de bajo nivel a múltiples líneas de jQuery. – Dom

DEMO - resplandor exterior usando CSS3 caja-sombra y la animación (usando -moz y -webkit prefijos proveedor).

Fuente

2012-09-24 15:32:02 Coby

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

The demo.

Fuente

2012-09-24 15:12:33 xdazz

Esa es ciertamente una opción para mí. Pero me gustaría hacer que el borde se desvanezca también. – Urbycoz

¿Cómo puedo resaltar un botón con jQuery?

Respuesta

Cuestiones relacionadas