Bootstrap Snippet Button-Animation using HTML CSS Javascript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    /* 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");
    });
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Button-Animation"
Bootstrap 4.0.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Button-Animation" Bootstrap 4.0.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Button-Animation"
Bootstrap 4.0.0 Snippet by sumi9xm