Published on: 09 February, 2016

How to create a flashing button using CSS3?

Posted by andy | 15653 views 1 likes 9 favourites 6 comments
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
Commented on: 21 Aug, 2017 08:46:59 PM
Thanx bytutorial.com Its Really Working
Nazzareno
Commented on: 06 Sep, 2017 01:35:39 AM
Very nice tutorial, clear and helpful, thanks a lot!
Theertha
Commented on: 05 Oct, 2017 06:51:35 PM
Wow,Superb...i want a code for button like this animation one more(different typ )
Rajnikanth
Commented on: 18 Nov, 2017 11:21:48 PM
Wow!! Thanks for the tutorials..
archana
Commented on: 10 Feb, 2018 07:57:58 PM
its really good thanks a lot....
Abdul Raheem
Commented on: 27 Mar, 2018 07:39:43 PM
super
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.