"Button round indicator"
Bootstrap 3.3.0 Snippet by BootstrapTema

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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 -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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%);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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%)';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit
Hexa shape button
Attractive Round Cornered Button with Icons
Round Icon Badges

Questions / Comments: