<ul class="menu bottomRight">
  <li class="share top">
    <i class="fa fa-share-alt"></i>
    <ul class="submenu">
      <li>
        <a href="#" class="facebook">
          <i class="fa fa-brands fa-facebook"></i>
        </a>
      </li>
      <li>
        <a href="#" class="twitter">
          <i class="fa fa-brands fa-twitter"></i>
        </a>
      </li>
      <li>
        <a href="#" class="googlePlus">
          <i class="fa fa-brands fa-google-plus"></i>
        </a>
      </li>
      <li>
        <a href="#" class="instagram">
          <i class="fa fa-brands fa-instagram"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>

<!--  -->
<ul class="menu bottomLeft">
  <li class="share right">
    <i class="fa fa-share-alt"></i>
     <ul class="submenu">
      <li>
        <a href="#" class="facebook">
          <i class="fa fa-brands fa-facebook"></i>
        </a>
      </li>
      <li>
        <a href="#" class="twitter">
          <i class="fa fa-brands fa-twitter"></i>
        </a>
      </li>
      <li>
        <a href="#" class="googlePlus">
          <i class="fa fa-brands fa-google-plus"></i>
        </a>
      </li>
      <li>
        <a href="#" class="instagram">
          <i class="fa fa-brands fa-instagram"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>

<!--  -->

<ul class="menu topLeft">
  <li class="share bottom">
    <i class="fa fa-share-alt"></i>
      <ul class="submenu">
      <li>
        <a href="#" class="facebook">
          <i class="fa fa-brands fa-facebook"></i>
        </a>
      </li>
      <li>
        <a href="#" class="twitter">
          <i class="fa fa-brands fa-twitter"></i>
        </a>
      </li>
      <li>
        <a href="#" class="googlePlus">
          <i class="fa fa-brands fa-google-plus"></i>
        </a>
      </li>
      <li>
        <a href="#" class="instagram">
          <i class="fa fa-brands fa-instagram"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>

<!--  -->

<ul class="menu topRight">
  <li class="share left">
    <i class="fa fa-share-alt"></i>
      <ul class="submenu">
      <li>
        <a href="#" class="facebook">
          <i class="fa fa-brands fa-facebook"></i>
        </a>
      </li>
      <li>
        <a href="#" class="twitter">
          <i class="fa fa-brands fa-twitter"></i>
        </a>
      </li>
      <li>
        <a href="#" class="googlePlus">
          <i class="fa fa-brands fa-google-plus"></i>
        </a>
      </li>
      <li>
        <a href="#" class="instagram">
          <i class="fa fa-brands fa-instagram"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>

<div class="container">
  <h1>Social Media Icons</h1>
</div>

<!-- ------------------------- -->
<a href="https://codepen.io/chandrashekhar" target="_blank" class="codepen_profile">
  <i class="fa-brands fa-codepen"></i>
</a>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

$background:#B2B1CF;
$white:#fff;
body{
  background-color: $background;
  font-family: 'Montserrat', sans-serif;
}
.container{
  height:70px;
  padding:55px;
  position:fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  text-align:center;
}


.menu{
  z-index:999;
  position:fixed;
  padding:0;
  margin:0;
  list-style-type:none;
  .share{
    i.fa{
      height:50px;
      width:50px;
      text-align:center;
      line-height:50px;
      background-color: #fff;
      border-radius:2px;
    }
    &:hover{
      &.bottom {
        .submenu{
          @for $i from 1 through 5{
            li:nth-child(#{$i}){
              opacity:1;
              top:#{$i*50}px;
              transform:rotate(0deg);
              border-top:1px dashed darken($white,20%);
              transition-delay:#{$i*0.08}s;
            }
          }
        }
      }
      &.left{
        .submenu{
          @for $i from 1 through 5{
            li:nth-child(#{$i}){
              opacity:1;
              left:#{-$i*51}px;
              transform:rotate(0deg);
              transition-delay:#{$i*0.5}s;
              border-right:1px dashed darken($white,20%);
            }
          }
        } 
      }
      &.right{
        .submenu{
          @for $i from 1 through 5{
            li:nth-child(#{$i}){
              opacity:1;
              left:#{$i*50}px;
              transform:rotate(0deg);
              transition-delay:#{$i*0.08}s;
              border-left:1px dashed darken($white,20%);
            }
          }
        }
      }
      &.top{
        .submenu{
          @for $i from 1 through 5{
            li:nth-child(#{$i}){
              opacity:1;
              top:#{-$i*51}px;
               transition-delay:#{$i*0.08}s;
              transform:rotateY(0deg);
              border-bottom:1px dashed darken($white,15%);
            }
          }
        }
      }
    }
  }
  .submenu{
    list-style-type:none;
    padding:0;
    margin:0;
    li{
      transition:all ease-in-out 0.5s;
      position:absolute;
      top: 0;
      left: 0;
      z-index:-1;
      opacity:0;
      a{
        color: #212121;
        &:hover{
          i.fa{
            color:#fff;
          }
          &.facebook{
            i.fa{
               background-color: #3b5999;
            }
          }
          &.twitter{
            i.fa{
              background-color: #55acee;
            }
          }
          &.googlePlus{
            i.fa{
              background-color: #dd4b39;
            }
          }
          &.instagram{
            i.fa{
              background-color: #e4405f;
            }
          }
        }
      }
    }
    @for $i from 1 through 4{
      li:nth-child(#{$i}){
        transform:rotateX(#{$i*45}deg);
      }
    }
    
  }
  &.topLeft{
    top:10px;
    left:10px;
  }
  &.topRight{
    top:10px;
    right:10px;
  }
  &.bottomLeft{
    bottom:10px;
    left:10px;
  }
  &.bottomRight{
    bottom:10px;
    right:10px;
  }
}


/********************************/
.codepen_profile {
 --pens-link-color:#ffffff;
  --pens-link-bgColor:#212121;
	position: fixed;
	bottom: 56px;
	right: 56px;
	margin: auto;
	display: inline-flex;
	font-size: 2rem;
	text-decoration: none;
	border-radius: 500px;
	background-color:var(--pens-link-bgColor);
	color: var(--pens-link-color);
  border:4px solid #ffffff;
	height: 56px;
	width: 56px;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	animation: animate 1500ms ease infinite;
  z-index:999999;
  &:hover{
    text-decoration:none;
    color:var(--pens-link-color);
  }
	@keyframes animate {
		0%,
		100% {
			transform: translatey(-10%);
		}
		50% {
			transform: translatey(10%);
		}
	}
}
/*******************************/
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.