Published on: 09 Feb, 2016

How to create a flashing button using CSS3?

Tumblr Digg Google Plus

In this tutorial you will learn how easily to build a flashing button using CSS3. As you know in CSS3, there is an animation feature we can use to achieve this.

Please see carefully the following css style code. We use the feature name animation to create the animation effect on our button. The animation feature will require we defines keyframes to trigger this effect. We then define our key frame from 0 to 100% by using the opacity feature to reduce the transparency level. In the animation itself, we specify what will be the duration of the animation and we want the animation to loop infinitely. To support older browser for firefox and safari, we need to include the -webkit and -moz css prefix on our css.

	padding:5px 10px;
	animation-name: flash;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	//Firefox 1+
	-webkit-animation-name: flash;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	//Safari 3-4
	-moz-animation-name: flash;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

@keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }

//Firefox 1+
@-webkit-keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }

//Safari 3-4
@-moz-keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }

<button type="button" class="flash-button">Test Button</button>

Quick Demo

You can see the quick demo below.


Jack Nicolson
21 Aug, 2017
Thanx Its Really Working
06 Sep, 2017
Very nice tutorial, clear and helpful, thanks a lot!
05 Oct, 2017
Wow,Superb...i want a code for button like this animation one more(different typ )
18 Nov, 2017
Wow!! Thanks for the tutorials..
10 Feb, 2018
its really good thanks a lot....
Abdul Raheem
27 Mar, 2018
Nilesh Sutar
24 Oct, 2018
It works as I want, thanks a lot.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.