"Hexa shape button"
Bootstrap 4.1.1 Snippet by Biplab01198

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
<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 id="home_quicklinks">
<a class="quicklink link1" href="#">
<span class="ql_caption">
<span class="outer">
<span class="inner">
<h2>Member</h2>
</span>
</span>
</span>
<span class="ql_top"></span>
<span class="ql_bottom"></span>
</a>
<a class="quicklink link2" href="#">
<span class="ql_caption">
<span class="outer">
<span class="inner">
<h2>Event</h2>
</span>
</span>
</span>
<span class="ql_top"></span>
<span class="ql_bottom"></span>
</a>
<a class="quicklink link3" href="#">
<span class="ql_caption">
<span class="outer">
<span class="inner">
<h2>Gallery </h2>
</span>
</span>
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
#home_quicklinks {
padding: 20px 0;
text-align: center;
}
a.quicklink.link1 {
background: #fc6719;
}
a.quicklink {
display: inline-block;
width: 302px;
height: 173px;
position: relative;
margin: 90px 30px;
}
a.quicklink .ql_caption {
display: block;
height: 100%;
width: 100%;
position: relative;
}
.outer {
display: table;
position: relative;
vertical-align: middle;
text-align: center;
height: 100%;
width: 100%;
border-spacing: 0px;
padding: 0px;
}
.inner {
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
height: 100%;
width: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: