Анимированная кнопка CSS3

 Измените скучные плоские кнопки на анимированные с эффектом сияния. Только css3. 

Просмотр Скачать

Код HTML

<button>Click me!</button>

Код CSS

button
{
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 15px;
  margin: 20px auto;
  color: #ccc;
  background-color: #555;
  background: -webkit-linear-gradient(#888, #555);
  background: linear-gradient(#888, #555);
  border: 0 none;
  border-radius: 3px;
  text-shadow: 0 -1px 0 #000;
  box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
  cursor: pointer;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}

button:hover, button:focus
{
  -webkit-animation: pulsate 1.2s linear infinite;
  animation: pulsate 1.2s linear infinite;
}
  
@-webkit-keyframes pulsate
{
  0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
  50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
  100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
    
@keyframes pulsate
{
  0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
  50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
  100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

button:active
{
  color: #fff;
  text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
  box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  -webkit-animation: none;
  animation: none;
}