Bootstrap Snippet bootstrap Social Buttons using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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">
    <div class="row">
        <a href="" class="btn btn-fb btn-sm"><i class="fa fa-facebook"></i> Facebook</a>
        <a href="" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
        <a href="" class="btn btn-fb btn-lg"><i class="fa fa-facebook"></i> Facebook</a>
        <a href="" class="btn btn-outline-fb btn-sm"><i class="fa fa-facebook"></i> Facebook</a>
        <a href="" class="btn btn-outline-fb"><i class="fa fa-facebook"></i> Facebook</a>
        <a href="" class="btn btn-outline-fb btn-lg"><i class="fa fa-facebook"></i> Facebook</a>
        <br />
        <a href="" class="btn btn-twitt btn-sm"><i class="fa fa-twitter"></i> twitter</a>
        <a href="" class="btn btn-twitt"><i class="fa fa-twitter"></i> twitter</a>
        <a href="" class="btn btn-twitt btn-lg"><i class="fa fa-twitter"></i> twitter</a>
        <a href="" class="btn btn-outline-twitt btn-sm"><i class="fa fa-twitter"></i> twitter</a>
        <a href="" class="btn btn-outline-twitt"><i class="fa fa-twitter"></i> twitter</a>
        <a href="" class="btn btn-outline-twitt btn-lg"><i class="fa fa-twitter"></i> twitter</a>
        <br />
        <a href="" class="btn btn-yt btn-sm"><i class="fa fa-youtube"></i> youtube</a>
        <a href="" class="btn btn-yt"><i class="fa fa-youtube"></i> youtube</a>
        <a href="" class="btn btn-yt btn-lg"><i class="fa fa-youtube"></i> youtube</a>
        <a href="" class="btn btn-outline-yt btn-sm"><i class="fa fa-youtube"></i> youtube</a>
        <a href="" class="btn btn-outline-yt"><i class="fa fa-youtube"></i> youtube</a>
        <a href="" class="btn btn-outline-yt btn-lg"><i class="fa fa-youtube"></i> youtube</a>
        <br />
        <a href="" class="btn btn-twitch btn-sm"><i class="fa fa-twitch"></i> twitch</a>
        <a href="" class="btn btn-twitch"><i class="fa fa-twitch"></i> twitch</a>
        <a href="" class="btn btn-twitch btn-lg"><i class="fa fa-twitch"></i> twitch</a>
        <a href="" class="btn btn-outline-twitch btn-sm"><i class="fa fa-twitch"></i> twitch</a>
        <a href="" class="btn btn-outline-twitch"><i class="fa fa-twitch"></i> twitch</a>
        <a href="" class="btn btn-outline-twitch btn-lg"><i class="fa fa-twitch"></i> twitch</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
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
.btn-fb {
  color: #fff;
  background-color: #3b5998;
  border-color: #3b5998;
}
.btn-fb:hover {
  color: #fff;
  background-color: #2d4373;
  border-color: #2a3f6c;
}
.btn-fb:focus, .btn-fb.focus {
  color: #fff;
  background-color: #2d4373;
  border-color: #2a3f6c;
}
.btn-fb:active, .btn-fb.active,
.open > .btn-fb.dropdown-toggle {
  color: #fff;
  background-color: #2d4373;
  border-color: #2a3f6c;
  background-image: none;
}
.btn-fb:active:hover, .btn-fb:active:focus, .btn-fb:active.focus, .btn-fb.active:hover, .btn-fb.active:focus, .btn-fb.active.focus,
.open > .btn-fb.dropdown-toggle:hover,
.open > .btn-fb.dropdown-toggle:focus,
.open > .btn-fb.dropdown-toggle.focus {
  color: #fff;
  background-color: #23345a;
  border-color: #17233c;
}
.btn-fb.disabled:focus, .btn-fb.disabled.focus, .btn-fb:disabled:focus, .btn-fb:disabled.focus {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"bootstrap Social Buttons"
Bootstrap 4.0.0 Snippet by SrJuggernaut

Related: See More

Questions / Comments:

"bootstrap Social Buttons" Bootstrap 4.0.0 Snippet by SrJuggernaut

Related: See More

Questions / Comments:

"bootstrap Social Buttons"
Bootstrap 4.0.0 Snippet by SrJuggernaut