Comment Créer un Bouton Éclair/Éclatant en Utilisant une Animation en CSS3

Dans ce snippet, nous allons montrer comment créer un bouton éclair/éclatant avec CSS pur. Ici vous n'avez pas besoin d'utiliser JavaScript. Suivez simplement à ces étapes et essayez les exemples!

<a href="#" class="button">Cliquez ici!</a>
<button type="submit" class="button">Cliquez ici!</button>

1. Créez un Lien et un Bouton.

Tout d'abord, créons un lien et un bouton comme cela:

2. Ajoutez un style au bouton.

Ensuite vous devez spécifier l'apparence du bouton à l'aide des propriétés 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. Ajoutez une animation au bouton:

On a besoin de keyframes pour ajouter une animation. L'animation se compose de trois keyframes. Chaque keyframe définit des nouvelles valeurs pour les propriétés background-color et 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;
  }
}

Keyframes dans les styles pour l'animaition:

0% est le point de départ qui définit la couleur verte de l'arrière-plan et la couleur verte de l'ombre autour du bouton avec une distance d'atténuation de 3 pixels.
50% est le point moyen qui définit la couleur verte claire de l'arrière-plan et de l'ombre autour du bouton avec une distance d'atténuation de 10 pixels.
100% est le point de la fin qui est défini comme keyframe 0%.

Alors, voyons le résultat!

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Créer un bouton éclair/éclatant</h2>
    <a class="button" href="#">Cliquez ici!</a>
    <button type="submit" class="button">Cliquez ici!</button>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple d'un bouton éclair/éclatant:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Créer un bouton éclair/éclatant</h2>
    <div class="wrapper">
      <a class="button" href="#">Cliquez ici!</a>
      <button type="submit" class="button">Cliquez ici!</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>

Essayez-vous-même!