Wie kann man einen blinkenden/leuchtenden Button mit Animation in CSS3 erstellen

Source Code: (back to article)

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</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>Blinkenden/leuchtenden Button erstellen</h2>
    <div class="wrapper">
      <a class="button" href="#">Hier Klicken!</a>
      <button type="submit" class="button">Hier Klicken!</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>