<div class="container">
    <div class="page-header">
    <h1>Animated Button on initial load</h1>
  </div><!--  /page-header  -->

  <a href="" class="btn btn-default">Click Here</a>
</div>
/* Jacob Lett - https//BootstrapCreative.com - Reference / Refresh / Repetition */

/* Chrome, Safari, Opera */
@-webkit-keyframes example {

  
}

/* Standard syntax */
@keyframes example {
    0%   {border:3px solid gray;}
    50%  {border:3px solid #fff;}
    100% {border:3px solid gray;}
}



.btn {
  border:3px solid gray;
    position: relative;
  animation-delay: 1s;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: .15s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: .15s;
    animation-iteration-count: 2;
}
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
  
  
// document ready  
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
  
  
// window load  
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js