SummArg | Cursos y recursos para webmasters

10/07/2011

Botones Radioactive con animaciones CSS

Este framework de botones CSS tiene una animación que se ve en navegadores webkit (Chrome, Safari) pero que son totalmente funcionales en cualquier navegador. Para lograr el efecto, primero se crea la animación:

@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

Y luego se indica su duración y las veces que se repetirá:

a.green.button {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

Radioactive Buttons

Dejar un comentario

  1. Wow muy bonito y simpre 😀 gracias

Dejar un comentario