ZyYajb

index.html

<div class="container">

<div class="follow">
  <div class="icon first">&commat;</div>
  <div class="icon">&sung;</div>
  <div class="icon">&oplus;</div>
  <div class="icon last">&phone;</div>
  <div class="label">Follow</div>
</div>
<div class="share">
  <div class="icon first">&supdsub;</div>
  <div class="icon">&starf;</div>
  <div class="icon">&empty;</div>
  <div class="icon last">&there4;</div>
  <div class="label">Share</div>
</div>
<button class="try">
  <span class="text">Try</span>
</button>
<button class="buy">
  <span class="price"><small>$</small>19</span>
  <span class="text">Buy</span>
</button>
  
</div>

style.scss

$h-root: 70;
$c-primary: hsl($h-root, 60%, 60%);
$c-primary-text: #111;
$c-secondary: hsl($h-root + 90, 80%, 30%);
$c-secondary-text: #EEE;

html {
  background-color: #424148;
  font-family: sans-serif;
  font-size: 125%;
}


.container {
  display: inline-block;
  color: $c-primary-text;
  padding: 1em;
  position: absolute;
  top: 50%;
  left: 0;
  text-align: right;
  transform: translateY(-50%);
  width: 61.8%;
  white-space: nowrap;

  @media screen and (max-width: 36rem) {
    transform: translateY(-50%) rotate(90deg) translateX(-50%);
  }
}

.buy, .try {
  vertical-align: middle;
}

.follow, .share {
  display: inline-block;
  cursor: default;
  padding: 0;
  margin: 0 .5em;
  position: relative;
  text-align: center;
  
  &:hover .label {
    opacity: 0;
    transition: opacity .5s .125s ease-out;
  }
  &:hover .icon {
    border-radius: 1em;
    margin: 0 0;
  }
}

.icon, .label {
  background-color: $c-primary;
  line-height: 2rem;
}
.label {
  border-radius: 1rem;
  position: absolute;
  font-size: .618em;
  font-weight: 900;
  letter-spacing: .0816em;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  pointer-events: none;
  text-transform: uppercase;
  transition: opacity .5s .75s ease-out;
}

.icon {
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  height: 2em;
  margin: 0 -.5em;
  transition:
    background-color .5s ease-out,
    border-radius .5s .25s ease-out,
    margin .5s .25s ease-out;
  width: 2em;
  
  &.first {
    border-bottom-left-radius: 1em;
    border-top-left-radius: 1em;
    margin-left: 0;
  }
  
  &.last {
    border-bottom-right-radius: 1em;
    border-top-right-radius: 1em;
    margin-right: 0;
  }
  
  &:hover {
    background-color: $c-secondary;
    color: $c-secondary-text;
  }
}

button {
  appearance: none;
  border-radius: 50%;
  border: 0;
  background-color: $c-primary;
  color: $c-primary-text;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: .0816em;
  position: relative;
  text-transform: uppercase;
  transition: background-color .25s ease-out, transform .5s ease-out;
  &:hover {
    background-color: $c-secondary;
    color: $c-secondary-text;
  }
}

.try {
  font-size: .618rem;
  height: 3rem;
  width: 3rem;
  margin: 0 .5rem;

  &:hover {
    transform: scale(1.3333);
    
    .text {
      display: inline-block;
      transform: scale(.75);
    }
    ~ .buy {
      transform: scale(.75);
    }
  }
  .text {
    transition: transform .5s ease-out;
    transform: scale(1);
  }
}
.buy {
  width: 5rem;
  height: 5rem;
  background-color: $c-secondary;
  color: $c-secondary-text;
  
  &:hover {
  }

  .price, .text {
    transition: opacity .25s ease-out;
  }
  .price {
    font-size: 1.618em;
    opacity: 1;
  }
  .text {
    display: block;
    font-size: .618em;
    font-weight: 900;
    letter-spacing: .0816em;
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    vertical-align: baseline;
  }
  
  &:hover .price {
    opacity: 0;
  }
  &:hover .text {
    opacity: 1;
  }
}

zyyajb.markdown

ZyYajb

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

A Pen by Moses Holmström on CodePen.

License.