"This is a beautiful pop-up for displaying social networks, by clicking on the button, the pop-up animation opens and each button has a colored background. The icons of each button are white, and in hover mode the color of these icons changes to gray, and by pressing the pop-up button again, these buttons close with the same animation mode. The icons are completely customizable, but we can say that we have placed the icons of most social networks."
HTML
<!-- This script got from www.devanswer.com -->
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<div id="wrapper">
<input type="checkbox" class="checkbox" id="share" checked />
<label for="share" class="label entypo-export"><i class="fa fa-share" aria-hidden="true"></i></label>
<div class="social">
<ul>
<li class="entypo-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li class="entypo-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></li>
<li class="entypo-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li class="entypo-gplus"><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li class="entypo-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="entypo-dropbox"><i class="fa fa-dropbox" aria-hidden="true"></i></li>
<li class="entypo-github"><i class="fa fa-github" aria-hidden="true"></i></li>
</ul>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
html {
margin: 0;
padding: 50px 0;
background: #161616;
}
#wrapper {
text-align: center;
position: absolute;
left: 0;
right: 0;
margin: 100px auto;
width: 420px;
}
input[type="checkbox"] {
display: none;
}
.checkbox:checked + .label {
background: #7B7484;
color: #231733;
}
.checkbox:checked ~ .social {
opacity: 1;
transform: scale(1) translateY(-90px);
}
.label {
background: #231733;
font-size: 16px;
cursor: pointer;
margin: 0;
padding: 5px 10px;
border-radius: 10%;
color: #7B7484;
}
.social {
transform-origin: 50% 0%;
transform: scale(0) translateY(-190px);
opacity: 0;
transition: .5s;
}
ul {
position: relative;
left: 0;
right: 0;
margin: -5px auto 0;
color: #fff;
height: 46px;
width: 420px;
background: #3B5998;
padding: 0;
list-style: none;
}
ul li {
font-size: 20px;
cursor: pointer;
width: 60px;
margin: 0;
padding: 12px 0;
text-align: center;
float: left;
display: block;
height: 22px;
}
ul li:hover {
color: rgba(0,0,0,.5);
}
ul:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
margin: 46px auto;
height: 0;
width: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #E34429;
}
li[class*="twitter"] {
background: #6CDFEA;
padding: 12px 0;
}
li[class*="gplus"] {
background: #E34429;
padding: 12px 0;
}
li[class*="dropbox"] {
background: #8DC5F2;
padding: 12px 0;
}
li[class*="github"] {
background: #9C7A5B;
padding: 12px 0;
}
li[class*="instagram"] {
background: #0E68CE;
padding: 12px 0;
}
li[class*="youtube"] {
background: #CC181E;
padding: 12px 0;
}
.credits a {
color: #fff;
text-decoration: none;
}
