Как создать мигающую/светящуюся кнопку с помощью анимации в CSS3

В этой статье мы покажем, как создать мигающую/светящуюся кнопку, используя только CSS. Здесь вам не нужно использовать JavaScript. Просто выполните следующие шаги и попробуйте примеры!

1. Создайте ссылку и кнопку.

Прежде всего создадим ссылку и кнопку в таком виде:

<a href="#" class="button">Click here!</a>
<button type="submit" class="button">Click here!</button>

2. Добавьте оформление к кнопке.

Дальше необходимо указать внешний вид кнопки с помощью CSS свойств:

.button{
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif; 
font-size: 20px;
padding: 10px 10px;
text-align: center;
text-decoration: none;
}

3. Добавьте анимацию к кнопке:

Нам нужны ключевые кадры, чтобы добавить анимацию. Анимация содержит три ключевых кадра. Каждый из них определяет новые значения для свойств background color и the box-shadow.

@keyframes glowing {
0% { background-color: #2ba805; box-shadow: 0 0 3px #2ba805; }
50% { background-color: #49e819; box-shadow: 0 0 10px #49e819; }
100% { background-color: #2ba805; box-shadow: 0 0 3px #2ba805; }
}

Ключевые кадры в оформлении анимаций:

0% - начальная точка, которая указывает зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 3 px.
50% - средняя точка, которая указывает светло-зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 10 px.
100% - конечная точка, которая указывается как 0%.

Давайте посмотрим результат!

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .button {
      background-color: #1c87c9;
      -webkit-border-radius: 60px;
      border-radius: 60px;
      border: none;
      color: #eeeeee;
      cursor: pointer;
      display: inline-block;
      font-family: sans-serif; 
      font-size: 20px;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      }
      @keyframes glowing {
      0% { background-color: #2ba805; box-shadow: 0 0 5px #2ba805; }
      50% { background-color: #49e819; box-shadow: 0 0 20px #49e819; }
      100% { background-color: #2ba805; box-shadow: 0 0 5px #2ba805; }
      }
      .button {
      animation: glowing 1300ms infinite;
      }
    </style>
  </head>
  <body>
    <h2>Создайте мигающую/светящуюся кнопку</h2>
    <a class="button" href="#">Нажмите сюда!</a>
    <button type="submit" class="button">Нажмите сюда!</button>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      body {
      margin: 0;
      }
      .wrapper {
      display: flex;
      height: 20vh;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      }
      .button {
      border: 1px transparent;
      -webkit-border-radius: 40px;
      border-radius: 40px;
      color: #eeeeee;
      cursor: pointer;
      display: inline-block;
      font-family: Arial;
      font-size: 20px;
      padding: 8px 30px;
      text-align: center;
      text-decoration: none;
      margin-left: 20px;
      -webkit-animation: glowing 1300ms infinite;
      -moz-animation: glowing 1300ms infinite;
      -o-animation: glowing 1300ms infinite;
      animation: glowing 1300ms infinite;
      }
      @-webkit-keyframes glowing {
      0% { background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; }
      50% { background-color: #21c7ed; -webkit-box-shadow: 0 0 15px #21c7ed; }
      100% { background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; }
      }
      @keyframes glowing {
      0% { background-color: #0091b2; box-shadow: 0 0 3px #0091b2; }
      50% { background-color: #21c7ed; box-shadow: 0 0 15px #21c7ed; }
      100% { background-color: #0091b2; box-shadow: 0 0 3px #0091b2; }
      }
      .svg-btn {
      display: block;
      width: 230px;
      height: 230px;
      margin-left: 10px;
      }
      svg {
      fill: blue;
      -webkit-animation: glowing-polygon 1300ms infinite;
      -moz-animation: glowing-polygon 1300ms infinite;
      -o-animation: glowing-polygon 1300ms infinite;
      animation: glowing-polygon 1300ms infinite;
      }
      @-webkit-keyframes glowing-polygon {
      0% { fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); }
      50% { fill: #21c7ed; -webkit-filter: drop-shadow( 0 0 15px #21c7ed); }
      100% { fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); }
      }
      @keyframes glowingPolygon  {
      0% { fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); }
      50% { fill: #21c7ed; filter: drop-shadow( 0 0 15px #21c7ed); }
      100% { fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); }
      }
    </style>
  </head>
  <body>
    <h2>Создайте мигающую/светящуюся кнопку</h2>
    <div class="wrapper">
      <a class="button" href="#">Нажмите сюда!</a>
      <button type="submit" class="button">Нажмите сюда!</button>
      <a class="svg-btn">
        <svg height="210" width="200">
          <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: #0091b2;"/>
        </svg>
      </a>
    </div>
  </body>
</html>

Попробуйте сами!