How to Create Flashing/Glowing Button Using Animations in CSS3

In this tutorial, we are going to show how to create a flashing/glowing HTML button with pure CSS. Here, you do not need to use JavaScript. Just follow the steps and run examples!

1. Create a link and button

First of all, let us create a link and a button like this:

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

2. Add style to the button

Then, you should specify the appearance of the button with the help of CSS properties:

.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: 5px 15px;
  text-align: center;
  text-decoration: none;
}

3. Add animation to the button

We need keyframes to add animation. We'll use 3 points (starting, middle, ending) of keyframes to define new values for the background-color and box-shadow properties.

@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 the styles for animation:

0% is the starting point which defines the green color of the background and the green color of the shadow around the button with a blur distance of 3 pixels.
50% is the middle point which defines the light green color of the background and the light green color of the shadow around the button with blur distance 10 pixels.
100% is the ending point which is defined as keyframe 0%.

So, let’s see the outcome!

Example of adding a glowing button:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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: 5px 15px;
        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>Create flashing/glowing button</h2>
    <a class="button" href="#">Click here!</a>
    <button type="submit" class="button">Click here!</button>
  </body>
</html>

Try it Yourself »

Result

Create flashing/glowing button Click here!

Example of creating a glowing button:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Create flashing/glowing button</h2>
    <div class="wrapper">
      <a class="button" href="#">Click here!</a>
      <button type="submit" class="button">Click here!</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>