Untitled

<div id="button-container">
  <button class="button" id="youtube">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
      <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
    </svg>
  </button>
  <button class="button" id="github">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
    </svg>
  </button>
  <button class="button" id="dribbble">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"></circle>
      <path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path>
    </svg>
 
  </button>
  <button class="button" id="instagram">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
    </svg>
 
  </button>
  <button class="button" id="facebook">
    <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
    </svg>
 
  </button>
  <button class="button" id="share">
    <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
      <circle r="3" cy="5" cx="18"></circle>
      <circle r="3" cy="12" cx="6"></circle>
      <circle r="3" cy="19" cx="18"></circle>
      <line y2="17.49" x2="15.42" y1="13.51" x1="8.59"></line>
      <line y2="10.49" x2="8.59" y1="6.51" x1="15.41"></line>
    </svg>
  </button>
</div>

<style>

  body{
    padding: 200px
  }

  #button-container{
    position: relative;
  }
  .button{
    position: absolute;
    top: 50%;
    left: 50%;
    translate:  -50% 50%;
    background: #f4f6f5;
    border:none;
    border-radius: 25px;
    height: 50px;
    width: 50px;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in;
}

#share{
  color:#dc0654;
  background: #fed6ed;
}

#facebook{
  background: linear-gradient(135deg , #00d2ff , #3a75d5);
}

#dribbble{
  background: linear-gradient(-70deg , #d70652 , #ff025E);
}

#instagram{
  background: linear-gradient(-70deg , #833Ab4 , #fd1d1d);
}

#github{
  background: linear-gradient(-70deg , #171515 , #ff025e);
}

#youtube{
  background: #ff0000;
}

#button-container:hover button{
  rotate: 360deg;
}

#button-container:hover #share{
  rotate:270deg;
}

#button-container:hover > #facebook{
  translate: -300% 50%;
}

#button-container:hover > #instagram{
  translate: -227% -126%;
}

#button-container:hover > #dribbble{
  translate: -50% -200%;
}

#button-container:hover > #github{
  translate: 127% -127%;
}

#button-container:hover > #youtube{
  translate: 200% 50%;
}
</style>