Bootstrap Snippet Pulse Effect Buttons using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
<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">
        <div class="pulse-btn" >
            <a href="#" class="btn btn-primary" >Pulse Effect Button</a>
        </div>
       
    </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
.pulse-btn {
    text-align: center;
    padding: 30px 0;
}
.pulse-btn .btn {
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.5em 1.5em;
    animation: pulse 1.5s cubic-bezier(0.66, 0.67, 0.83, 0.99) infinite;
}
@media (max-width: 767px) {
    .pulse-btn .btn {
        font-size: 16px;
        letter-spacing: normal;
        padding: 10px 15px;
    }
}
@keyframes pulse {
    0% {
        outline: 1px solid #428bca;
        outline-offset: 0px;
    }
    30% {
        outline: 1px solid rgba(48, 113, 169, 0.7);
        outline-offset: 10px;
    }
    60% {
        outline: 1px solid rgba(48, 113, 169, 0);
        outline-offset: 20px;
    }
    100% {
        outline: 1px solid rgba(48, 113, 169, 0);
        outline-offset: 60px;
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pulse Effect Buttons"
Bootstrap 3.3.0 Snippet by farooqshad

Related: See More

Questions / Comments:

"Pulse Effect Buttons" Bootstrap 3.3.0 Snippet by farooqshad

Related: See More

Questions / Comments:

"Pulse Effect Buttons"
Bootstrap 3.3.0 Snippet by farooqshad