Радиоактивная кнопка с помощью CSS анимации

Sending
Оценка пользователей
5 (1 vote)

Сегодня мы будем создавать кнопку с меняющимся цветом при помощи 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;
}

Вот что у нас должно получиться

Кнопка

Поделиться:

Ваш отзыв

наверх