Your rating has been changed, thanks for rating!

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

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:

Starting point is keyframe 0% which defines blue color of background and blue color of shadow around the button with blur distance 3 pixels. 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. 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:

#004A7F → #7F006E #0094FF → #FF00DC

Live demo