<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);
});
