<div class="action" onclick="actionToggle();">
  <span>+</span>
  <ul>
    <li><img src="https://www.flaticon.com/svg/static/icons/svg/2111/2111392.svg" alt="" width="25px">Share on Facebook</li>
    <li><img src="https://www.flaticon.com/svg/static/icons/svg/2111/2111765.svg" alt="" width="25px">Share on VK</li>
    <li><img src="https://www.flaticon.com/svg/static/icons/svg/2111/2111432.svg" alt="" width="25px">Share on GitHub</li>
    <li><img src="https://www.flaticon.com/svg/static/icons/svg/1384/1384031.svg" alt="" width="25px">Share on Instagram</li>
    <li><img src="https://www.flaticon.com/svg/static/icons/svg/2111/2111341.svg" alt="" width="25px">Share on Codepen</li>
    <li><img src="https://www.flaticon.com/svg/static/icons/svg/1384/1384030.svg" alt="" width="25px">Share on Linkedin</li>
  </ul>
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
body {
  min-height: 100vh;
  background: linear-gradient(#7d6cfc, #c635ea);
}
.action {
  position: fixed;
  bottom: 50px;
  left: 50px;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}
.action span {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a13dea;
  font-size: 2em;
  transition: .3s ease-in-out;
}
.action.active span  {
  transform: rotate(135deg);
}

.action ul {
  position: absolute;
  bottom: 55px;
  background: #fff;
  min-width: 250px;
  padding: 20px;
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.action.active ul {
  bottom: 65px;
  opacity: 1;
  visibility: visible;
  transition: .3s;
}
.action ul li {
  list-style:none;
   text-decoration: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 7px 0;
}

.action ul li:hover {
  font-weight: 600;
}
.action ul li:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.action ul li img {
  margin-right: 15px;
  opacity: .2;
  transform: scale(.7);
}
.action ul li:hover img {  
  opacity: .8;
  transform: scale(1.0);
}

function actionToggle() {
  const action = document.querySelector('.action');
  action.classList.toggle('active')
}