"floating icon on hover"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div class="float-container">
<a href="#" class="icon one">Book now</a>
<a href="#" class="icon two">Get in touch</a>
<a href="#" class="icon three">Send us a message</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
.float-container {
position: fixed;
top: 33%;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
width: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.float-container a {
z-index: 99;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 30px;
margin-right: -190px;
margin-bottom: 10px;
padding: 10px 20px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-decoration: none;
color: white;
border-color: #46b8da;
border-radius: 5px 0 0 5px;
background-color: #eb690b;
-webkit-box-shadow: 0 2px 4px #7d7d7d;
box-shadow: 0 2px 4px #7d7d7d;
-webkit-box-align: center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: