share-unit

by zerippe

HTML

<section class="sns-share">
  <ul>
    <li class="twitter"><a href="t">Twitter</a></li>
    <li class="facebook"><a href="f">Facebook</a></li>
    <li class="line"><a href="l">Line</a></li>
    <li class="hatena"><a href="h">Hatena</a></li>
  </ul>
</section>

CSS

.sns-share ul{
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

.sns-share li{
  flex: 1;
  list-style: none;
  text-align: center;
}

.sns-share a{
  display: block;
  text-decoration: none;
  color: #fff;
}

.sns-share .twitter{
  background-color: #55acee;
}

.sns-share .facebook{
  background-color: #3B5998;
}

.sns-share .line{
  background-color: #00b900;
}

.sns-share .hatena{
  background-color: #008fde;
}