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

In diesem Kapitel zeigen wir, wie man einen blinkenden/leuchtenden Button mit CSS erstellen kann. Hier brauchen Sie kein JavaScript zu verwenden. Folgen Sie einfach diesen Schritten und führen Sie Beispiele aus!

Zuerst lassen Sie uns einen Link und einen Button wie folgt erstellen:

<a href="#" class="button">Hier Klicken!</a>
<button type="submit" class="button">Hier Klicken!</button>

2. Stylen Sie den Button

Dann sollen Sie das Aussehen des Buttons mithilfe von CSS-Eigenschaften definieren:

.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. Fügen Sie Animation zum Button hinzu:

Wir brauchen Keyframes, um Animationen hinzuzufügen. Die Animation besteht aus drei Keyframes. Jedes Keyframe definiert neue Werte für die Eigenschaften background color und 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 in den Styles für die Animation:

  1. 0% ist der Ausgangspunkt, der die grüne Farbe des Hintergrunds und die grüne Farbe des Schattens um die Schaltfläche mit einer Unschärfe von 3 Pixeln definiert.
  2. 50% ist der Mittelpunkt, der die hellgrüne Farbe des Hintergrundes und die hellgrüne Farbe des Schattens um die Taste mit einer Unschärfe von 10 Pixeln definiert.
  3. 100% ist der Endpunkt, der als Keyframe 0% definiert ist.

So lassen Sie uns das Ergebnis sehen!

Beispiel

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

Ein weiteres Beispiel für den blinkenden/leuchtenden Button:

Beispiel

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