Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create flashing/glowing button using animation in CSS3

How to create flashing/glowing button using animation in CSS3

How to create flashing/glowing button using animation in CSS3
 
How to create flashing/glowing button using animation in CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article shows how to create a button with flashing/glowing effect using animation in CSS3 without JavaScript.

The styles below are applied to elements with class "button". These styles can be mainly applied for links and buttons in HTML.

Here is HTML code of a link and button:

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

The following portion of CSS styles forms the appearance of the button:

.button {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}

The next portion of the CSS styles shown below adds animation to the button.

Animation for this button uses keyframes in CSS3. In this portion of styles, animation consists of three keyframes. Each keyframe defines new values for CSS properties background-color and box-shadow. They perform gradual control of animation which can't be accomplished using transition CSS property.

Here is a list of keyframes in the styles for animation:

  1. Starting point is keyframe 0% which defines blue color of background and blue color of shadow around the button with blur distance 3 pixels.
  2. Middle point is keyframe 50% which defines light blue color of background and light blue color of shadow around the button with blur distance 10 pixels.
  3. Ending point is keyframe 100% which is defined the same way as keyframe 0%.

The animation with three keyframes described above creates flashing/glowing effect for the button which is repeated infinite amount of times.

Here are CSS styles for animation:

@-webkit-keyframes glowing {
  0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; }
}

@-moz-keyframes glowing {
  0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; }
}

@-o-keyframes glowing {
  0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
}

@keyframes glowing {
  0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
}

.button {
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

Live demo

The styles above can have less code if we remove CSS styles with vendor prefixes which are used for older versions of browsers. So, without vendor prefixes they look the following way:

@keyframes glowing {
  0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
}

.button {
  animation: glowing 1500ms infinite;
}

If you need more explanations about animation above, just read the following article: Animation in CSS3.

Animation in the styles above changes color of the button and its shadow from blue to light blue and then these styles loop the animation. If you want to change colors for the button, just find and replace the following parts of code with new colors:

  1. #004A7F#7F006E
  2. #0094FF#FF00DC

Live demo


 

Read also

Animated 3D button using only CSS3

Animated 3D button using only CSS3

Animation in CSS3

Animation in CSS3

Discussion (total 1 comments)

Tik.
September 28, 2015 at 09:28 pm
Thanks a lot for making this tutorial and for including live examples.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation