<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class='text-center'> <h3 class='text-center'>Showing Element</h3> <button class='btn btn-danger btn-lg' onclick='myFunc()' id='button'>Click To Action</button> <button style='display:none' id='buttonID' onclick='myFunc()' class='btn btn-danger btn-lg'>This Is A Button</button> </div> </div>

.container{margin:0 auto} @-webkit-keyframes fadeIn{to{opacity:1}} @keyframes fadeIn{to{opacity:1}} .fade-in{-webkit-animation:fadeIn .5s ease-out 1 forwards;animation:fadeIn .5s ease-in 1 forwards;opacity:0}

function myFunc() { var linAs = document.getElementById("button"); var linkEd = document.getElementById("buttonID"); var timing = 6; var text_timing = document.createElement("span"); linkEd.parentNode.replaceChild(text_timing, linkEd); var id; id = setInterval(function() { timing--; if (timing < 0) { clearInterval(id); $(linkEd, text_timing).fadeIn("slow"); text_timing.parentNode.replaceChild(linkEd, text_timing); linAs.style.display = "none"; } else { text_timing.innerHTML = "<div id='timming' class='text-danger fade-in'>Button Will Appear After <strong>" + timing.toString() + " Second</strong></div>"; linkEd.style.display = "inline"; linAs.style.display = "none"; } if (timing < 5) { $("#timming").removeClass("fade-in"); } }, 1000); }