Published on: 09 February, 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.

<style>
.flash-button{
	background:blue;
	padding:5px 10px;
	color:#fff;
	border:none;
	border-radius:5px;
	
	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; }
}
</style>

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

Quick Demo

You can see the quick demo below.

Comments

Jack Nicolson
21 August, 2017
Thanx bytutorial.com Its Really Working
Nazzareno
06 September, 2017
Very nice tutorial, clear and helpful, thanks a lot!
Theertha
05 October, 2017
Wow,Superb...i want a code for button like this animation one more(different typ )
Rajnikanth
18 November, 2017
Wow!! Thanks for the tutorials..
archana
10 February, 2018
its really good thanks a lot....
Abdul Raheem
27 March, 2018
super
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.