Published on: 09 February, 2016

How to create a flashing button using CSS3

Posted by andy | 13468 views 14 likes 8 favourites 5 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.

	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
Commented on: 21 Aug, 2017 08:46:59 PM
Thanx Its Really Working
Commented on: 06 Sep, 2017 01:35:39 AM
Very nice tutorial, clear and helpful, thanks a lot!
Commented on: 05 Oct, 2017 06:51:35 PM
Wow,Superb...i want a code for button like this animation one more(different typ )
Commented on: 18 Nov, 2017 11:21:48 PM
Wow!! Thanks for the tutorials..
Commented on: 10 Feb, 2018 07:57:58 PM
its really good thanks a lot....
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Share your article with us and add your own google adsense account to earn extra money. Plus, you can promote a link back to your site.
Related Articles
Published on: 20 January, 2018
By default, a table in HTML will contain a default value of cellpadding and cellspacing. This can be easily removed if you are using tag properties attached to the HTML table itself. For example, you can see the following image. I have included a border to the table so we can exactly see the cellpadding and cellspacing applied to the table.
Published on: 13 July, 2016
Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
Published on: 24 March, 2016
You probably never thought about creating a heart shape completely using CSS3. Furthermore, you can include an animation to show the heart is actually beating. This is can be easily done with CSS3 animation. No flash or images are required.
Related Tutorials
Published on: 28 June, 2014
Learn how to use media queries in CSS3. Media queries are simple conditions used to targetting different devices for tables, phones or desktop computers. As each device may have different view size, media queries become so handy to use to display the content dimension correctly.
Published on: 28 June, 2014
Learn how to use advanced selectors in CSS3. By using the built in pseudo-class, performing a selector in CSS3 is so much easy.
Published on: 14 May, 2014
Learn how to use multiple-column property in CSS3. To create multiple columns in CSS3 is now so handy, you just need to include a css built-in keyword column-count to do the job for you. No more table layout required.
Published on: 13 May, 2014
Learn how to use box-sizing property in CSS3. As you know many browsers treat margin and padding differently. When you combine with width or height of an element box, you find out that the final dimension is completely different when you view with different browser. Well, this now can be easily taken care by using the new CSS box-sizing property.
Published on: 09 May, 2014
Learn how to use opacity property in CSS3. So what is actually opacity? CSS3 Opacity defines a transparency level of an element. The property value of opacity is range from 0 to 1.