The glowing/flashing effect can be applied to both, links and the form buttons.
To create this effect we will be using CSS3 animations. If you don't know how to create CSS3 animations, please refer to our previous article "CSS3 ANIMATIONS - @KEYFRAMES RULE".
Animations are too easy to use to create nice looking effects on our web pages using CSS3. It can replace the traditional flash animations.
Let's get back to our work. Here is the simple HTML code which creates a simple LINK and BUTTON :
<a href="#" class="glowingbutton" > Click me! </a>
<button type="submit" class="glowingbutton"> Click me! </button>
Now the below CSS will change the basic properties (color, fonts, width, height, borders etc.) of the above two buttons:
.glowingbutton {
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;
animation: glowing 1500ms infinite;
}
The below part of CSS3 is the all, what we need to create the glowing effect.
We will use @keyframe rule to make this animation. There will be three keyframes in our animation. One will be at 0%, second will be on 50% and third on 100%.
At 0% the background color of the button will be dark red and the background shadow will be light red at 3px distance.
At 50% the background color of the button will be light red and the background shadow will also be light red but at 20px distance, so that it create a good glowing effect.
and At 100% the background color and background shadow will be as same as at 0%.
@keyframes glowing {
0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
In the below code pen the sample output and the code is given. The code in the below pen is also useful for cross browser solution (will give same output in every browser).
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.