Радиоактивные кнопки
Красивые анимированные "радиоактивные" светящиеся кнопки на CSS. Всю красоту сможете увидеть только в браузерах Safari 4.x и Chrome.
Для каждой кнопки мы настраиваем три вещи:
- Название анимации
- Продолжительность анимации
- И сколько раз происходит повтор анимации
CSS
@-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; }
}
a.green.button {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
В демо кнопки оформлены ещё дополнительными css стилями и накладыванием прозрачного изображения (добавляющего объема кнопкам), поэтому можете скачать исходники и подсмотреть оформление.
Ссылки