logo DevAnswer - Developers Answer

Popup Social Networks Button

11th February

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
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;
}
</style>

</head>
<body>
<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>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>                        



Other Codes