"awesome button hover efftect "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Post to Facebook Tweet this

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 href="#" class="btn btn--border btn--center btn--border-lightgrey"> <span class="btn-text">Read more</span> <span class="btn-arrow"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="7" viewBox="0 0 16 7"> <path fill="#174233" fill-rule="nonzero" d="M12.727 0L16 3.394l-3.273 3.394V4.245H0V2.74h12.73z"></path> </svg> </span> </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
.press__container .btn {
margin-top: 3.125em;
}
btn--center {
display: table;
margin: 0 auto;
}
.btn--border-lightgrey {
border: 1px solid #e1eaec;
}
.btn--border {
border: 1px solid #174233;
color: #174233;
}
.btn {
position: relative;
font-family: "Canela Web",serif;
font-size: 1.125em;
text-align: center;
padding: 20px 40px;
}
.btn--border-lightgrey:before {
background-color: #174233;
}
.btn:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.9s cubic-bezier(0.6,0.05,0.01,0.99);
backface-visibility: hidden;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Awesome Search Box
My Awesome Login Page
Hexa shape button

Questions / Comments: