<button class="button" id="button">
  <i class="fas fa-share-alt"></i>
  
  <ul>
    <li>
      <a href="#"><i class="fab fa-facebook"></i></a>
    </li>
    <li>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </li>
    <li>
      <a href="#"><i class="fab fa-instagram"></i></a>
    </li>
  </ul>
</button>

$sizeButton: 45px;
$circleSize: $sizeButton * 3;

* {
  outline: none;
}

body {
  background: radial-gradient(circle, #333,#1d1f20);
  height: 100vh;
  width: 100%;
}

button {
  position: fixed;
  bottom: 30px;
  right: 50%;
  background: white;
  border: none;
  width: $sizeButton;
  height: $sizeButton;
  border-radius: 50%;
  transform: rotate(180deg);
  svg {
    transform: rotate(-180deg);
  }
  & > svg {
    cursor: pointer;
  }
  ul {
    margin: 0;
    padding: 0;
    width: $circleSize;
    hegith: $circleSize;
    left: 50%;
    top: 50%;
    position: absolute;
    list-style: none;
    li {
      display: block;
      position: absolute;
      margin: -(($sizeButton * 0.75) / 2);
      transform: rotate(0) translate(0);
      transition: 0.4s ease all;
      opacity: 0;
      a {
        display: block;
        color: black;
        font-size: 20px;
        background: white;
        width: $sizeButton * 0.75;
        height: $sizeButton * 0.75;
        margin: 0 auto;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  &.active {
    li {
      opacity: 1;
      &:nth-child(1) {
        transform: rotate(0) translate($circleSize / 2);
      }
      
      &:nth-child(2) {
        transform: rotate(45deg) translate($circleSize / 2) rotate(-45deg);
      }
      &:nth-child(3) {
        transform: rotate(90deg) translate($circleSize / 2) rotate(-90deg);
      }
    }
  }
}

window.addEventListener("load", function(event) {
    let button = document.getElementById("button");

    button.addEventListener("click", function(){
      this.classList.toggle('active');
      let svg = this.querySelector('svg');

      svg.classList.toggle('fa-share-alt');
      svg.classList.toggle('fa-times');
    });
});