Share buttons for Hugo based on https://aakira.app/blog/2018/08/share/

share.css

.sns_parent {
  text-align: center;
}

.sns_section {
  display: inline-block;
  text-align: left;
}
.sns_button {
  float: left;
  box-shadow: inset 0 0 0 2px #42464c;
  border-radius: 100%;
  -moz-transition: all 280ms ease;
  -o-transition: all 280ms ease;
  -webkit-transition: all 280ms ease;
  transition: all 280ms ease;
}
.sns_button a {
  display: table-cell;
  width: 44px;
  height: 44px;
  color: #42464c;
  text-align: center;
  vertical-align: middle;
  -moz-transition: all 280ms ease;
  -o-transition: all 280ms ease;
  -webkit-transition: all 280ms ease;
  transition: all 280ms ease;
}
.sns_button i {
  font-size: 20px;
  vertical-align: middle;
}
.sns_button:hover {
  box-shadow: inset 0 0 0 22px #eaeaea;
}

.sns_button + .sns_button {
  margin: 0 0 0 12px;
}

.mastodon:hover a {
  color: #6364FF;
}

.twitter:hover a {
  color: #000000;
}

.facebook:hover a {
  color: #3B5999;
}

.instagram:hover a {
  color: #2b5c84;
}

.pocket:hover a {
  color: #EE4056;
}

.hatena:hover a {
  color: #4BA3D9;
}

.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold
}

share.html

{{ if ne .Params.share false}}
<!-- use font awsome -->
<section class="section sns_parent">
  <div class="container sns_section">
      <div class="sns_button mastodon">
        <a href="https://donshare.net/share.html?url={{ .Permalink }}&text={{ .Title }}" target="_blank" title="mastodon"><i class="fab fa-brands fa-mastodon"></i></a>
      </div>
      <div class="sns_button twitter">
        <a href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank" title="Tweet"><i class="fab fa-x-twitter"></i></a>
      </div>
      <div class="sns_button hatena">
        <a href="http://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="hatena"><i class="fa fa-hatena"></i></i></a>
      </div>
      <div class="sns_button facebook">
        <a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}&t={{ .Title }}" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a>
      </div>
      <div class="sns_button pocket">
        <a href="http://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="pocket"><i class="fab fa-get-pocket"></i></a>
      </div>
  </div>
</section>
{{ end }}