Bootstrap Snippet App Store download button using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
<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 ---------->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
    <div class="row text-center">
        <h2>Awesome App Store download button</h2>
        <p><a href="#" class="btn btn-app-store"><i class="fa fa-apple"></i> <span class="small">Download on the</span> <span class="big">App Store</span></a></p>
    </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
.btn-app-store{
    background: black;
    color: white;
    position: relative;
    height: 60px;
    padding-left: 55px;
    padding-right: 20px;
}
.btn-app-store i{
    font-size: 40px;
    position: absolute;
    left: 10px;
}
.btn-app-store .small{
    display: block;
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 2px;
    margin-top: 5px;
}
.btn-app-store .big{
    display: block;
    text-align: left;
    font-size: 21px;
    line-height: 21px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"App Store download button"
Bootstrap 3.3.0 Snippet by jluisfg

Related: See More

Questions / Comments:

"App Store download button" Bootstrap 3.3.0 Snippet by jluisfg

Related: See More

Questions / Comments:

"App Store download button"
Bootstrap 3.3.0 Snippet by jluisfg