"call now button"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="call-button">
<a href="tel:123-456-7890">
<span class="phone-block"><svg class="svg-inline--fa fa-phone" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"></path></svg><!-- <i class="fa fa-phone"></i> Font Awesome fontawesome.com --></span>
<span>Call Us</span>
</a>
</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
.call-button {
position: fixed;
text-align: center;
right: -58px;
background: #f37d26;
top: 68%;
transform: rotate(90deg);
color: #fff;
padding: 14px 29px;
z-index: 99999;
cursor: pointer;
font-size: 17px;
right: auto;
left: 10px;
top: auto;
bottom: 20px;
transform: none;
padding: 0;
width: 82px;
min-height: 82px;
line-height: 82px;
border-radius: 82px;
animation: shadow-pulse 1s infinite;
}
.call-button a {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Hipster As F*** Cards
Hexa shape button
Callouts - Call to Action
Call to action with dark background

Questions / Comments: