How to create flashing/glowing button using animation in CSS3
How to create flashing/glowing button using animation in CSS3
by rajnishw3
HTML
<span>NEW</span>
CSS
span{
font-size: 9px;
padding: 4px 6px;
border-radius: 50%;
color: #fff;
-webkit-animation: glowing 1500ms infinite;
-moz-animation: glowing 1500ms infinite;
-o-animation: glowing 1500ms infinite;
animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
0% { background-color: #FF0000; -webkit-box-shadow: 0 0 3px #FF0000; }
50% { background-color: #FA8072; -webkit-box-shadow: 0 0 10px #FA8072; }
100% { background-color: #FF0000; -webkit-box-shadow: 0 0 3px #FF0000; }
}
@-moz-keyframes glowing {
0% { background-color: #FF0000; -moz-box-shadow: 0 0 3px #FF0000; }
50% { background-color: #FA8072; -moz-box-shadow: 0 0 10px #FA8072; }
100% { background-color: #FF0000; -moz-box-shadow: 0 0 3px #FF0000; }
}
@-o-keyframes glowing {
0% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
50% { background-color: #FA8072; box-shadow: 0 0 10px #FA8072; }
100% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
}
@keyframes glowing {
0% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
50% { background-color: #FA8072; box-shadow: 0 0 10px #FA8072; }
100% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
}