<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

    <title>Social Button List</title>
  </head>
  <body>
    <div class="m-3"><a class="btn btn-social btn-facebook" href="#" role="button"><i class="fab fa-facebook"></i> Facebook</a></div>
    <div class="m-3"><a class="btn btn-social btn-twitter" href="#" role="button"><i class="fab fa-twitter"></i> Twitter</a></div>
    <div class="m-3"><a class="btn btn-social btn-google-plus" href="#" role="button"><i class="fab fa-google-plus"></i> Google +</a></div>
    <div class="m-3"><a class="btn btn-social btn-line" href="#" role="button"><i class="fab fa-line"></i> LINE</a></div>
    <div class="m-3"><a class="btn btn-social btn-github" href="#" role="button"><i class="fab fa-github"></i> GitHub</a></div>
    <div class="m-3"><a class="btn btn-social btn-dropbox" href="#" role="button"><i class="fab fa-dropbox"></i> Dropbox</a></div>
    <div class="m-3"><a class="btn btn-social btn-microsoft" href="#" role="button"><i class="fab fa-microsoft"></i> Microsoft</a></div>
  </body>
</html>
.btn-social {
  width: 120px;
  color: white;
}
.btn-facebook {
  background-color: #3B5998;
}
.btn-twitter {
  background-color: #55acee;
}
.btn-google-plus {
  background-color: #dd4b39;
}
.btn-line {
  background-color: #00b900;
}
.btn-github {
  background-color: #333;
}
.btn-dropbox {
  background-color: #007ee5;
}
.btn-microsoft {
  background-color: #f65314;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.