Share Buttons HTML + CSS + DEMO

demo.md

social.css

/* Colors from - http://brandcolors.net/ */

ul.social {
  list-style: none;
  padding-left: 0px;
  margin-bottom: 0px;
  display: table;
}
ul.social > li {
  display: table-cell;
  color: white;
  margin: 0px;
  padding: 0px;
  width: 35px;
  height: 35px;
  text-align: center;
  vertical-align: middle;
}
ul.social > li > a {
  display: inline-block;
  text-decoration: none;
  color: white;
}
ul.social > li.facebook {
  background-color: #3b5998;
}
ul.social > li.facebook:hover {
  background-color: #4669b4;
}
ul.social > li.twitter {
  background-color: #55acee;
}
ul.social > li.twitter:hover {
  background-color: #78bdf1;
}
ul.social > li.google {
  background-color: #dc4e41;
}
ul.social > li.google:hover {
  background-color: #e26c61;
}
ul.social > li.linkedin {
  background-color: #0077b5;
}
ul.social > li.linkedin:hover {
  background-color: #0090db;
}
ul.social > li.email {
  background-color: gray;
}
ul.social > li.email:hover {
  background-color: #939393;
}

social.html

<!-- Using Font Awesome - http://fontawesome.io/ -->
<!-- Edit links to point to your prefferded location -->

<ul class="social">
  <li class="twitter"><a href="#twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
  <li class="linkedin"><a href="#linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  <li class="facebook"><a href="#facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
  <li class="google"><a href="#google"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
  <li class="email"><a href="#email"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
</ul>