How to make Flash/Blinking button with CSS3

You may be familiar with Flash effect button (on hover button starts to blink fast), these flash effect usually made with CSS3 keyframes animation and button constructed with CSS. Here I explained how to create flash effect button with CSS3 keyframes animation, let’s take the journey:-

How to make Flash/Blinking button with CSS3

Preview & Demo:-

Download

Designing the button

Let's name the button with CSS class

.ks-flash

Within bracket fixing 'height' and 'width', additionally 'border-radius' and 'cursor', and as button background using Gradient color.

Designing the button's link

.ks-flash a
Within bracket added 'font-family', 'font-size', 'text-decoration', 'display' etc

And finally designing :hover with CSS3 keyframes
.ks-flash:hover

Within bracket adding animation name and duration with cross browser supported prefixes (for mozilla 'moz', for safari and chorme 'webkit' etc)

     -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration:1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s; 

And than call keyframe (at cursor hover's 0%, 50%, 100% the button will be shown and at 25%, 75% button will be despair using 'opacity')

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

and also added cross browser supported prefixes

Now whole CSS looking like:-

/*crawlist.net button starts*/
.ks-flash {
  vertical-align: top;
  width:200px;
  height:50px;
  cursor: pointer; 
 border-radius:3px;
background: #7d7e7d;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); }
.ks-flash a {font-family: 'Droid Serif', serif; font-size:26px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-align: center;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ks-flash:hover  {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration:1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s; 
}
@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

@-ms-keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}   
    25%, 75% {opacity: 0;}
}
/*crawlist.net button ends*/

Now it's time to call designed button with HTML, so with a DIV class call it, also added the link
a href,

<div class="ks-flash">
<a href="http://www.google.com/">Click this</a>
</div>

Do it by yourself, on Codepen or CSSdeck or Dreamweaver, and use it on your web project. What you feel about this tutorial don't forget to mention. New CSS tutorial will be release soon so stay connected. Chill....