<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="bts align-center"> <a href="blog.html" class="btn btn_animated"> <span class="circle"> <span class="ink animate" style="height: 123px; width: 123px; top: -33.9375px; left: 61.0625px;"></span>View Blog </span> </a> </div> <br><hr> <button type="submit" class="btn btn_animated" > <span class="circle"> <span class="ink animate" style="height: 123px; width: 123px; top: -33.9375px; left: 61.0625px;"></span>Submit </span> </button> <br><hr> <li> <a href="#sk-home" class="btn btn_animated"> <span class="circle"> <span class="ink animate" style="height: 123px; width: 123px; top: -33.9375px; left: 61.0625px;"></span>Home </span> </a> </li> </div> </div>

a.btn, .btn { position: relative; overflow: hidden; display: inline-block; vertical-align: middle; height: 42px; line-height: 42px; padding: 0; font-weight: 400; text-align: center; color: #fefefe; font-size: 14px; background: #304fff; cursor: pointer; transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; } a.btn .circle, .btn .circle { padding: 0 30px; } .btn_animated .circle { width: 100%; height: 100%; display: block; } .animate { -webkit-animation: ripple 0.6s linear; animation: ripple 0.6s linear; } .ink { display: block; position: absolute; background: rgba(0, 0, 0, 0.2); border-radius: 100%; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); } @keyframes ripple { 100% { opacity: 0; transform: scale(4); -webkit-transform: scale(4); } } li{ list-style-type:none; }

/* Button hover effect */ $('.btn_animated').on('mouseenter', '.circle', function(e){ if ($(this).find(".ink").length === 0) { $(this).prepend("<span class='ink'></span>"); } var ink = $(this).find(".ink"); ink.removeClass("animate"); if (!ink.height() && !ink.width()) { var d = Math.max($(this).outerWidth(), $(this).outerHeight()); ink.css({ height: d, width: d }); } var x = e.pageX - $(this).offset().left - ink.width() / 2; var y = e.pageY - $(this).offset().top - ink.height() / 2; ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate"); });