"Attractive Round Cornered Button with Icons"
Bootstrap 3.3.0 Snippet by saminfante

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<!-- Button trigger modal -->
<a class="btn icon-btn btn-danger" data-toggle="modal" href="#myModal"><span class="glyphicon btn-glyphicon glyphicon-play img-circle text-danger"></span>WATCH THE REEL</a>
<!--<button type="button text-center" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>-->
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/SyiwWRMoXXA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</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
.btn-glyphicon { padding:2.5rem; background:#ffffff; margin-right:1.975rem; }
.icon-btn { padding: 1rem 2rem 3rem 5rem; border-radius:7.8375rem;}
.btn {
font-family: "Lato";
font-size: 3.975rem;
font-weight: 700;
text-transform: uppercase;
padding: 3rem 5rem 3rem 3rem;
}
.container {
height: 28rem;
width: 100%;
position: fixed;
background-color: #f7f7f7;
bottom: 0;
}
.container a {
position: absolute;
top: 50%;
left: 50%;
margin-top: -23px;
margin-left: -100px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard React
Hexa shape button
Unique Attractive Login Form
Attractive Round Cornered Button with Icons

Questions / Comments: