Recently, I saw a page with a button that did a little wiggle every so often and thought it was pretty cool.  So, I set out to figure it out.  This is intended for WordPress with jQuery.

This is what it looks like.

The first thing you need is a button with a unique ID attribute.

<button id="wiggle-button">A Super Special Button</button>

Next will style it up a bit with some CSS.  The first section sets some simple styles so the button looks nice.  The second section does some cool things with CSS tranformations.

#wiggle-button {
  padding: 10px 20px 10px 20px;
  background-color:  rgba(0,103,8,1.00);
  border: 1px solid rgba(0,0,0,1.00);
  color: #fff;
}
@-webkit-keyframes wiggle
{
    0% {-webkit-transform: rotateZ(2deg);}
    50% {-webkit-transform: rotateZ(-2deg);}
    100% {-webkit-transform: rotateZ(2deg);}
}
@-moz-keyframes wiggle
{
    0% {-moz-transform: rotateZ(2deg);}
    50% {-moz-transform: rotateZ(-2deg);}
    100% {-moz-transform: rotateZ(2deg);}
}
@-o-keyframes wiggle
{
    0% {-o-transform: rotateZ(2deg);}
    50% {-o-transform: rotateZ(-2deg);}
    100% {-o-transform: rotateZ(2deg);}
}
@keyframes wiggle
{
    0% {transform: rotateZ(2deg);}
    50% {transform: rotateZ(-2deg);}
    100% {transform: rotateZ(2deg);}
}

.wobble-me {
    -webkit-animation: wiggle 0.2s ease infinite;
    -moz-animation: wiggle 0.2s ease infinite;
    -o-animation: wiggle 0.2s ease infinite;
    animation: wiggle 0.2s ease infinite;
}

Finally, add some jQuery love to make it come to life.  In here we are first checking to make sure the element exists.  If it does, we’ll wait 5000 milliseconds then then apply the wiggle class to the button.  After 2 seconds we’ll remove the class and start over again.  I think this this intermittent wiggle looks pretty cool.

jQuery( document ).ready(function() {
  
  if (jQuery('#wiggle-button').length) {
    window.setInterval(function(){

      jQuery( "wiggle-button" ).addClass( "wobble-me" );
      setTimeout(function () { 
        jQuery('#wiggle-button').removeClass('wobble-me');
      }, 1000);

    }, 5000);
  }
console.log( "ready!" );
});

That’s it!  You’re all done.  This could be used on a newsletter button or any call to action to which you want to draw the eye.  It works well in common browsers I’ve tested and on smart phones.  Have fun!