2 641 Скрипты / Buttons

Радиоактивные кнопки


Красивые анимированные "радиоактивные" светящиеся кнопки на 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 стилями и накладыванием прозрачного изображения (добавляющего объема кнопкам), поэтому можете скачать исходники и подсмотреть оформление.

Скачать 665Загрузок 1,7 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи