<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
This Pen doesn't use any external JavaScript resources.