Button Blink

Button-Blink.markdown

Button Blink

Easy way to do button blink with class.

A Pen by ezos86 on CodePen.

License.

index.html

<div class="box"></div>

script.js

$('.box').click(function(){
  $(this).toggleClass('active');
});

style.scss

@import "compass/css3";
html{
  margin:20px;
}
.box{
  width:100px;
  height:100px;
  background-color:red;
}
.active{
  background-color:blue;
  //box-shadow: 0 0 10px red;
      -webkit-animation: blink 1.0s linear infinite;
    -moz-animation: blink 1.0s linear infinite;
    -ms-animation: blink 1.0s linear infinite;
    -o-animation: blink 1.0s linear infinite;
    animation: blink 1.0s linear infinite;
}

@keyframes blink {
    0% { box-shadow: 0 0 30px red; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 30px red; }
}

@-webkit-keyframes blink {
    0% { box-shadow: 0 0 30px red; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 30px red; }
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes glow {
    from {box-shadow: 0 0 0 red;}
    to {box-shadow: 0 0 30px red;}
} 

/* Standard syntax */ 
@keyframes glow {
    from {box-shadow: 0 0 0 red;}
    to {box-shadow: 0 0 30px red;}
}