<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>


<h2>Font Awesome Social Buttons Powered by Bootstrap</h2>

<div class="pad50"></div>
<div class="container">

  <a href="https://facebook.com/colorlib" target="_blank" class="button facebook"><span><i class="fa fa-facebook" aria-hidden="true"></i></span><p>Facebook</p></a>

  <a href="https://twitter.com/colorlib" target="_blank" class="button twitter"><span><i class="fa fa-twitter" aria-hidden="true"></i></i></span><p>Twitter</p></a>

  <a href="https://plus.google.com/+Colorlib" target="_blank" class="button google-plus"><span><i class="fa fa-google-plus" aria-hidden="true"></i></span><p>Google +</p></a>

  <a href="https://github.com/puikinsh" target="_blank" class="button github"><span><i class="fa fa-github" aria-hidden="true"></i></span><p>Github</p></a>


  <a href="https://www.linkedin.com/company/colorlib" target="_blank" class="button linkedin"><span><i class="fa fa-linkedin" aria-hidden="true"></i></span><p>Linkedin</p></a>
  <a href="#" class="button instagram"><span><i class="fa fa-instagram" aria-hidden="true"></i></span><p>Instagram</p></a>
  <a href="https://www.flickr.com/" target="_blank" class="button flickr"><span><i class="fa fa-flickr" aria-hidden="true"></i></span><p>Flickr</p></a>

  <a href="https://www.pinterest.com/colorlib/" target="_blank" class="button pinterest"><span><i class="fa fa-pinterest" aria-hidden="true"></i></span><p>Pinterest</p></a>

  <a href="https://youtube.com/c/Colorlib" target="_blank" class="button youtube"><span><i class="fa fa-youtube" aria-hidden="true"></i></span><p>YouTube</p></a>

  <a href="#" class="button stackexchange"><span><i class="fa fa-stack-overflow" aria-hidden="true"></i></span><p>Stack Overflow</p></a>

  <a href="#" class="button skype"><span><i class="fa fa-skype" aria-hidden="true"></i></span><p>Skype</p></a>

  <a href="#" class="button dropbox"><span><i class="fa fa-dropbox" aria-hidden="true"></i></span><p>Dropbox</p></a>

  <a href="#" class="button android"><span><i class="fa fa-android" aria-hidden="true"></i></span><p>Android</p></a>

  <a href="#" class="button apple"><span><i class="fa fa-apple" aria-hidden="true"></i></span><p>Apple</p></a>

  <a href="#" class="button dribbble"><span><i class="fa fa-dribbble" aria-hidden="true"></i></span><p>Dribbble</p></a>

</div>

body { text-align: center; padding: 10px; 
  
}
.container { width: 90%; text-align: center; margin: auto;}
background: #121212;

p{
  font-family: 'Rock Salt', sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.pad50{
  padding-top: 50px;
}

.button {

  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding-right: 30px;
  padding-left: 70px;
  position: relative;
  background-color:rgb(0,0,0);
  color:rgb(255,255,255);
  text-decoration: none;
  text-transform: none
  letter-spacing: 1px;
  margin-bottom: 14px;
  text-shadow:1px 1px 0px rgba(0,0,0,0.5);
}

.button:hover{
  text-decoration: none;
  color: #fff;
  text-shadow: none;
}

.button p{font-size: 18px;}
.button span {
  position: absolute;
  left: 0;
  width: 50px;
  font-size:30px;
  -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid  rgba(0,0,0,0.15);
    text-decoration: none;
}

.button.twitter {
  background: #00acee;
}

.button.facebook {
 background: #3b5998;
}

.button.google-plus{
  background: #db4a39;
}

.button.linkedin {
  background: #0e76a8;
}

.button.youtube {
 background: #c4302b;
}

.button.github{
  background: #171515;
}

.button.android {
  background: #a4c639;
}

.button.skype {
 background: #00aff0;
 }

.button.dropbox{
  background: #3d9ae8;
}

.button.foursquare{
  background: #25a0ca;
}

.button.apple{
  background: #cdcdcd;
}

.button.dribbble{
  background: #ea4c89;
}

.button.instagram{
  background: #3f729b;
}

.button.pinterest{
  background: #c8232c;
}

.button.stackexchange{
  background: #ef8236;
}

.button.flickr{
  background: #ff0084;
}

.text-center{
  text-align: center;
}