How to make Flash/Blinking button with CSS3

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:-


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....

Popular posts from this blog

Add Cool Social Media Sharing icons below posts in Blogger

13 Best Forum CMS/Script to use

Easily Get 50000 free Backlink for your website

7 best CMS/script for building Social networking website

Read Download Stephen King's Novels ePub & Apk

Read Download ePub Harry Potter Books & Apk

10 Best Free Flash Editor software to use

12 best free Article Rewriter/Spinner you can use

Top 6 Best Alternatives to ZBIGZ

6 Best Local Web Server software