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