How to create flashing/glowing button using animation in CSS3
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:
Click me!
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
Continue reading here: How to create a simple tooltip using only CSS3
Was this article helpful?
Readers' Questions
-
mantissa12 days ago
- Reply
-
Stephanie2 months ago
- Reply
-
blaine4 months ago
- Reply
-
senay6 months ago
- Reply
-
ermias6 months ago
- Reply
-
george6 months ago
- Reply
-
wegahta9 months ago
- Reply
-
longo10 months ago
- Reply
-
scarlet gray10 months ago
- Reply
-
FRASER10 months ago
- Reply
-
Pansy12 months ago
- Reply
-
barbara1 year ago
- Reply
-
bianca1 year ago
- Reply