"Simple Bottom style"
Bootstrap 4.1.1 Snippet by mohibullah

1
2
3
4
5
6
7
8
9
10
<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="container">
<div class="row">
<a class="hvr-bounce-to-top" role="button">button</a>
</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
.hvr-bounce-to-top {
backface-visibility: hidden;
background: #f00 none repeat scroll 0 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
color: #fff;
display: inline-block;
font-size: 16px;
padding: 9px 0;
position: relative;
transform: translateZ(0px);
transition-duration: 0.5s;
transition-property: color;
vertical-align: middle;
width: 160px;
text-align:center;
}
.hvr-bounce-to-top::before {
background: #ccc none repeat scroll 0 0;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
transform: scaleY(0);
transform-origin: 50% 100% 0;
transition-duration: 0.5s;
transition-property: transform;
transition-timing-function: ease-out;
z-index: -1;
}
.hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active {
color: #fff;
}
.hvr-bounce-to-top:hover::before, .hvr-bounce-to-top:focus::before, .hvr-bounce-to-top:active::before {
transform: scaleY(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: