JSFiddle - React, Tailwind, and code Playground

by rome_margo

HTML

<body>
  
  <div class="container"  > 
    
    <a href="#" class="buttons" tooltip="Google+"></a>
    
    <a href="#" class="buttons" tooltip="Twitter"></a>
    
    <a href="#" class="buttons" tooltip="Facebook"></a>

    <a class="buttons" tooltip="Share" href="#"></a>

  </div>
  
</body>

SCSS

.container {
  width: 100px;
  background-color: tomato;
  
    .buttons {
    border-radius: 50%;
    display: block;
    width: 56px;
    height: 56px;
    margin: 20px auto 0;
    position: relative;
    -webkit-transition: all .1s ease-out;
            transition: all .1s ease-out;  

    &:not(:last-child) {
      width: 40px;
      height: 40px;
      margin: 20px auto 0;
      opacity: 0;
      transform: translateY(50px);
    }
  }
}
.container:hover .buttons:not(:last-child) {
    opacity: 1;
    transform: none;
    margin: 15px auto 0;
  }

/* Unessential styling for sliding up buttons at differnt speeds */

.buttons:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
          transition-delay: 25ms;
  background-image: url('https://cbwconline.com/IMG/Share.svg');
  background-size: contain;
}

.buttons:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 50ms;
          transition-delay: 20ms;
  background-image: url('https://cbwconline.com/IMG/Facebook-Flat.png');
  background-size: contain;
}

.buttons:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 75ms;
          transition-delay: 40ms;
  background-image: url('https://cbwconline.com/IMG/Twitter-Flat.png');
  background-size: contain;
}

.buttons:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 100ms;
          transition-delay: 60ms;
  background-image: url('https://cbwconline.com/IMG/Google%20Plus.svg');
  background-size: contain;
}