"Button round indicator"
Bootstrap 3.3.0 Snippet by xrozix

<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="row"> <h2 class="text-center"><a href="http://bootstraptema.ru/stuff/snippets_bootstrap/button/knopka_s_kruglym_indikatorom/23-1-0-1843" target="_blank">BootstrapTema</a></h2> <div class="col-sm-4 col-sm-offset-4"> <div class="btncontent"> <div class="btnbg" style="cursor: pointer;"> <svg version="1.1" id="animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 220 220" enable-background="new 0 0 220 220" xml:space="preserve"> <path fill="none" stroke="#1a822c" stroke-width="20" stroke-miterlimit="10" d="M110,10c55.2,0,100,44.8,100,100s-44.8,100-100,100 S10,165.2,10,110S54.8,10,110,10" style="-webkit-transition: stroke-dashoffset 5s ease-in-out; transition: stroke-dashoffset 5s ease-in-out; stroke-dasharray: 628.357360839844px, 628.357360839844px; stroke-dashoffset: 0px;"> </path> </svg> <div class="btnshape"></div> <div class="btn"></div> <span class="btntxt">START</span> </div> </div> </div><!-- /.col-sm-4 col-sm-offset-4 --> </div><!-- /.row --> </div><!-- /.container -->
/* demo bg */ body{background:url(/images/bg/bg-3.png)} /* end demo bg */ .btncontent { width: 300px; height: 285px; margin: 0 auto; } .btnbg { width: 240px; height: 240px; margin: 0 auto; border-radius: 240px; box-shadow: 0 2px 2px rgba(255, 255, 255, .5), inset 0 2px 12px rgba(0, 0, 0, .2); background: linear-gradient(to bottom, #d2d2d2 0%, #efefef 100%); position: relative; } .btnshape { position: absolute; top: 20px; left: 20px; width: 200px; height: 200px; border-radius: 200px; background: linear-gradient(to bottom, #d2d2d2 0%, #efefef 100%); box-shadow: 0 35px 40px rgba(0, 0, 0, .2), 0 20px 40px rgba(0, 0, 0, .1), 0 8px 12px rgba(0, 0, 0, .35), inset 0 2px 2px rgba(255, 255, 255, 1), inset 0 -10px 25px rgba(0, 0, 0, .18); } .btn { position: absolute; top: 60px; left: 60px; width: 120px; height: 120px; border-radius: 120px; box-shadow: 0 2px 2px rgba(255, 255, 255, .75), inset 0 4px 20px rgba(0, 0, 0, .1); background: linear-gradient(#40a063 0%, #4fca82 100%); } .btntxt { color: #fff; font-size: 30px; text-transform: uppercase; display: inline-block; width: 120px; text-align: center; position: absolute; top: 107px; left: 60px; line-height: 0.95; word-spacing: -5px; text-shadow: #1a822c 0px 2px 0px; }
document.addEventListener('DOMContentLoaded', function () { function animatePath(path) { var length = path.getTotalLength(); path.style.transition = path.style.WebkitTransition = 'none'; path.style.strokeDasharray = length + ' ' + length; path.style.strokeDashoffset = length; path.getBoundingClientRect(); path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 5s ease-in-out'; path.style.strokeDashoffset = '0'; } function afterPathAnimation() { var text = document.querySelector('.btntxt'); text.style.color = 'white'; text.style.textShadow = '0 2px 0 rgba(29,146,49,1)'; var btn = document.querySelector('.btn'); btn.style.background = 'linear-gradient(to bottom, rgba(57,142,88,1) 0%, rgba(59,196,116,1) 100%)'; var btn_base = document.querySelector('.btnbg'); btn_base.style.cursor = 'pointer'; animateBg(btn); } function animateBg(elem) { setTimeout(function () { elem.style.background = 'linear-gradient(to bottom, rgba(116,184,96,1) 0%,rgba(157,211,143,1) 100%)'; setTimeout(function () { elem.style.background = 'linear-gradient(to bottom, rgba(57,142,88,1) 0%, rgba(59,196,116,1) 100%)'; setTimeout(function () { elem.style.background = 'linear-gradient(to bottom, rgba(116,184,96,1) 0%,rgba(157,211,143,1) 100%)'; setTimeout(function () { elem.style.background = 'linear-gradient(to bottom, rgba(57,142,88,1) 0%, rgba(59,196,116,1) 100%)'; setTimeout(function () { elem.style.background = 'linear-gradient(to bottom, rgba(116,184,96,1) 0%,rgba(157,211,143,1) 100%)'; setTimeout(function () { elem.style.background = 'linear-gradient(to bottom, rgba(57,142,88,1) 0%, rgba(59,196,116,1) 100%)'; }, 100) }, 800) }, 100) }, 800) }, 100) }, 800) } var path = document.querySelector('path'); path.addEventListener("transitionend", afterPathAnimation, false); animatePath(path); });

Related: See More


Questions / Comments: