Share button concept

https://www.reddit.com/r/web_design/comments/6fdobk/how_would_you_code_the_share_and_follow_buttons/

by alexb

HTML

<ul>
  <li><a href="#1" class="twitter"></a></li>
  <li><a href="#2" class="facebook"></a></li>
  <li><a href="#3" class="googleplus"></a></li>
  <li><a href="#4" class="email"></a></li>
</ul>

SCSS

body {
  background: #111;
  padding: 2em 0;
}

h3 {
  color: white;
  text-transform: uppercase;
}

/* 4 links overlapping each other. */

ul {
  margin: 2em auto;
  width: 224px;
}

ul li {
  float: left;
}

ul a {
  background: #222;
  color: #fff;
  display: block;
  height: 48px;
  margin-right: -8px;
  transition: 0.4s ease-out all;
  width: 48px;
}

/* Always round the outside of the end links */

ul li:first-child a {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

ul li:last-child a {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

/* Spread them links (on hover). */

ul:hover a {
  border-radius: 25px;
  margin-right: 8px;
}

/* Icon specific */

.twitter:hover {
  background: #55acee;
}

.facebook:hover {
  background: #3b5999;
}

.googleplus:hover {
  background: #dd4b39;
}

.email:hover {
  background: #410093;
}