<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>
@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 {
background-color: #3b5998;
border-color: #3b5998;
}
.btn-fb.disabled:hover, .btn-fb:disabled:hover {
background-color: #3b5998;
border-color: #3b5998;
}
.btn-outline-fb {
color: #3b5998;
background-image: none;
background-color: transparent;
border-color: #3b5998;
}
.btn-outline-fb:hover {
color: #fff;
background-color: #3b5998;
border-color: #3b5998;
}
.btn-outline-fb:focus, .btn-outline-fb.focus {
color: #fff;
background-color: #3b5998;
border-color: #3b5998;
}
.btn-outline-fb:active, .btn-outline-fb.active,
.open > .btn-outline-fb.dropdown-toggle {
color: #fff;
background-color: #3b5998;
border-color: #3b5998;
}
.btn-outline-fb:active:hover, .btn-outline-fb:active:focus, .btn-outline-fb:active.focus, .btn-outline-fb.active:hover, .btn-outline-fb.active:focus, .btn-outline-fb.active.focus,
.open > .btn-outline-fb.dropdown-toggle:hover,
.open > .btn-outline-fb.dropdown-toggle:focus,
.open > .btn-outline-fb.dropdown-toggle.focus {
color: #fff;
background-color: #23345a;
border-color: #17233c;
}
.btn-outline-fb.disabled:focus, .btn-outline-fb.disabled.focus, .btn-outline-fb:disabled:focus, .btn-outline-fb:disabled.focus {
border-color: #718dc8;
}
.btn-outline-fb.disabled:hover, .btn-outline-fb:disabled:hover {
border-color: #718dc8;
}
.btn-twitt {
color: #e1e8ed;
background-color: #1da1f2;
border-color: #1da1f2;
}
.btn-twitt:hover {
color: #e1e8ed;
background-color: #0c85d0;
border-color: #0b7fc6;
}
.btn-twitt:focus, .btn-twitt.focus {
color: #e1e8ed;
background-color: #0c85d0;
border-color: #0b7fc6;
}
.btn-twitt:active, .btn-twitt.active,
.open > .btn-twitt.dropdown-toggle {
color: #e1e8ed;
background-color: #0c85d0;
border-color: #0b7fc6;
background-image: none;
}
.btn-twitt:active:hover, .btn-twitt:active:focus, .btn-twitt:active.focus, .btn-twitt.active:hover, .btn-twitt.active:focus, .btn-twitt.active.focus,
.open > .btn-twitt.dropdown-toggle:hover,
.open > .btn-twitt.dropdown-toggle:focus,
.open > .btn-twitt.dropdown-toggle.focus {
color: #e1e8ed;
background-color: #0a70ae;
border-color: #085788;
}
.btn-twitt.disabled:focus, .btn-twitt.disabled.focus, .btn-twitt:disabled:focus, .btn-twitt:disabled.focus {
background-color: #1da1f2;
border-color: #1da1f2;
}
.btn-twitt.disabled:hover, .btn-twitt:disabled:hover {
background-color: #1da1f2;
border-color: #1da1f2;
}
.btn-outline-twitt {
color: #1da1f2;
background-image: none;
background-color: transparent;
border-color: #1da1f2;
}
.btn-outline-twitt:hover {
color: #fff;
background-color: #1da1f2;
border-color: #1da1f2;
}
.btn-outline-twitt:focus, .btn-outline-twitt.focus {
color: #fff;
background-color: #1da1f2;
border-color: #1da1f2;
}
.btn-outline-twitt:active, .btn-outline-twitt.active,
.open > .btn-outline-twitt.dropdown-toggle {
color: #fff;
background-color: #1da1f2;
border-color: #1da1f2;
}
.btn-outline-twitt:active:hover, .btn-outline-twitt:active:focus, .btn-outline-twitt:active.focus, .btn-outline-twitt.active:hover, .btn-outline-twitt.active:focus, .btn-outline-twitt.active.focus,
.open > .btn-outline-twitt.dropdown-toggle:hover,
.open > .btn-outline-twitt.dropdown-toggle:focus,
.open > .btn-outline-twitt.dropdown-toggle.focus {
color: #fff;
background-color: #0a70ae;
border-color: #085788;
}
.btn-outline-twitt.disabled:focus, .btn-outline-twitt.disabled.focus, .btn-outline-twitt:disabled:focus, .btn-outline-twitt:disabled.focus {
border-color: #7dc9f8;
}
.btn-outline-twitt.disabled:hover, .btn-outline-twitt:disabled:hover {
border-color: #7dc9f8;
}
.btn-yt {
color: #fff;
background-color: #cd201f;
border-color: #cd201f;
}
.btn-yt:hover {
color: #fff;
background-color: #a11918;
border-color: #981817;
}
.btn-yt:focus, .btn-yt.focus {
color: #fff;
background-color: #a11918;
border-color: #981817;
}
.btn-yt:active, .btn-yt.active,
.open > .btn-yt.dropdown-toggle {
color: #fff;
background-color: #a11918;
border-color: #981817;
background-image: none;
}
.btn-yt:active:hover, .btn-yt:active:focus, .btn-yt:active.focus, .btn-yt.active:hover, .btn-yt.active:focus, .btn-yt.active.focus,
.open > .btn-yt.dropdown-toggle:hover,
.open > .btn-yt.dropdown-toggle:focus,
.open > .btn-yt.dropdown-toggle.focus {
color: #fff;
background-color: #821414;
border-color: #5e0f0e;
}
.btn-yt.disabled:focus, .btn-yt.disabled.focus, .btn-yt:disabled:focus, .btn-yt:disabled.focus {
background-color: #cd201f;
border-color: #cd201f;
}
.btn-yt.disabled:hover, .btn-yt:disabled:hover {
background-color: #cd201f;
border-color: #cd201f;
}
.btn-outline-yt {
color: #cd201f;
background-image: none;
background-color: transparent;
border-color: #cd201f;
}
.btn-outline-yt:hover {
color: #fff;
background-color: #cd201f;
border-color: #cd201f;
}
.btn-outline-yt:focus, .btn-outline-yt.focus {
color: #fff;
background-color: #cd201f;
border-color: #cd201f;
}
.btn-outline-yt:active, .btn-outline-yt.active,
.open > .btn-outline-yt.dropdown-toggle {
color: #fff;
background-color: #cd201f;
border-color: #cd201f;
}
.btn-outline-yt:active:hover, .btn-outline-yt:active:focus, .btn-outline-yt:active.focus, .btn-outline-yt.active:hover, .btn-outline-yt.active:focus, .btn-outline-yt.active.focus,
.open > .btn-outline-yt.dropdown-toggle:hover,
.open > .btn-outline-yt.dropdown-toggle:focus,
.open > .btn-outline-yt.dropdown-toggle.focus {
color: #fff;
background-color: #821414;
border-color: #5e0f0e;
}
.btn-outline-yt.disabled:focus, .btn-outline-yt.disabled.focus, .btn-outline-yt:disabled:focus, .btn-outline-yt:disabled.focus {
border-color: #e86a6a;
}
.btn-outline-yt.disabled:hover, .btn-outline-yt:disabled:hover {
border-color: #e86a6a;
}
.btn-twitch {
color: #fff;
background-color: #6441a5;
border-color: #6441a5;
}
.btn-twitch:hover {
color: #fff;
background-color: #4e3380;
border-color: #493079;
}
.btn-twitch:focus, .btn-twitch.focus {
color: #fff;
background-color: #4e3380;
border-color: #493079;
}
.btn-twitch:active, .btn-twitch.active,
.open > .btn-twitch.dropdown-toggle {
color: #fff;
background-color: #4e3380;
border-color: #493079;
background-image: none;
}
.btn-twitch:active:hover, .btn-twitch:active:focus, .btn-twitch:active.focus, .btn-twitch.active:hover, .btn-twitch.active:focus, .btn-twitch.active.focus,
.open > .btn-twitch.dropdown-toggle:hover,
.open > .btn-twitch.dropdown-toggle:focus,
.open > .btn-twitch.dropdown-toggle.focus {
color: #fff;
background-color: #3e2867;
border-color: #2d1d4a;
}
.btn-twitch.disabled:focus, .btn-twitch.disabled.focus, .btn-twitch:disabled:focus, .btn-twitch:disabled.focus {
background-color: #6441a5;
border-color: #6441a5;
}
.btn-twitch.disabled:hover, .btn-twitch:disabled:hover {
background-color: #6441a5;
border-color: #6441a5;
}
.btn-outline-twitch {
color: #6441a5;
background-image: none;
background-color: transparent;
border-color: #6441a5;
}
.btn-outline-twitch:hover {
color: #fff;
background-color: #6441a5;
border-color: #6441a5;
}
.btn-outline-twitch:focus, .btn-outline-twitch.focus {
color: #fff;
background-color: #6441a5;
border-color: #6441a5;
}
.btn-outline-twitch:active, .btn-outline-twitch.active,
.open > .btn-outline-twitch.dropdown-toggle {
color: #fff;
background-color: #6441a5;
border-color: #6441a5;
}
.btn-outline-twitch:active:hover, .btn-outline-twitch:active:focus, .btn-outline-twitch:active.focus, .btn-outline-twitch.active:hover, .btn-outline-twitch.active:focus, .btn-outline-twitch.active.focus,
.open > .btn-outline-twitch.dropdown-toggle:hover,
.open > .btn-outline-twitch.dropdown-toggle:focus,
.open > .btn-outline-twitch.dropdown-toggle.focus {
color: #fff;
background-color: #3e2867;
border-color: #2d1d4a;
}
.btn-outline-twitch.disabled:focus, .btn-outline-twitch.disabled.focus, .btn-outline-twitch:disabled:focus, .btn-outline-twitch:disabled.focus {
border-color: #9a7fcd;
}
.btn-outline-twitch.disabled:hover, .btn-outline-twitch:disabled:hover {
border-color: #9a7fcd;
}
