TryIt Editor v2.0 - Exemple d'un Bouton Éclair/Éclatant

Source Code: (back to article)

<!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>