Sticky Social Media Buttons Sidebar with CSS

Social media helps to increase traffic and boost visitors. Learn how to add social sharing buttons in website specially they are sticky to attract users.

Social media plays an important role to target your specific users. Business can be shared over social media and in return you can boost business. To reach local customers one must use social buttons.  Update your user about the activities you do on website Social media buttons are useful. Sticky social buttons are the way to increase social sharing score and increase followers on social media. Without zero knowledge you can create sticky social media buttons with CSS without impacting website design.

Beside business sharing, boost traffic to your website by social media.

Learn how to implement your own social sharing buttons in website with pure CSS. Floating social media buttons includes – Facebook, Twitter, Google+, LinkedIn, YouTube, and Pinterest.

HTML Code

–Placed the following HTML in the <body> element of the web page, and add your social profile links to the respective social icons.

<div class="sticky-container">
    <ul class="sticky">
        <li>
            <img src="images/facebook-circle.png" width="32" height="32">
            <p><a href="https://www.facebook.com/twoclockk" target="_blank">Like Us on<br>Facebook</a></p>
        </li>
        <li>
            <img src="images/twitter-circle.png" width="32" height="32">
            <p><a href="https://twitter.com/" target="_blank">Follow Us on<br>Twitter</a></p>
        </li>
        <li>
            <img src="images/gplus-circle.png" width="32" height="32">
            <p><a href="https://plus.google.com/" target="_blank">Follow Us on<br>Google+</a></p>
        </li>
        <li>
            <img src="images/linkedin-circle.png" width="32" height="32">
            <p><a href="https://www.linkedin.com/companY" target="_blank">Follow Us on<br>LinkedIn</a></p>
        </li>
        <li>
            <img src="images/youtube-circle.png" width="32" height="32">
            <p><a href="http://www.youtube.com/" target="_blank">Subscribe on<br>YouYube</a></p>
        </li>
        <li>
            <img src="images/pin-circle.png" width="32" height="32">
            <p><a href="https://www.pinterest.com/" target="_blank">Follow Us on<br>Pinterest</a></p>
        </li>
    </ul>
</div>

CSS Code

–The following short CSS is enough to implement a Sticky Social Icons bar to your website. Pleace this CSS in the <head> section of the web page.

.sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.sticky li{
    list-style-type:none;
    background-color:#fff;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky li:hover{
    margin-left:-115px;
}
.sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}

–You can find many jQuery plugins for floating sidebar, but it may impact your site speed and design. To overcome this issue, we’ll provide a simple CSS code to add animated sticky social bar at the left/right side of your website. You can add this social media floating sidebar with smooth hover over animation using CSS.

Conclusion

Here we’ve added only some most popular social icons to the sticky social bar, you can add other social media icons or useful links based on your requirement.

Leave a Reply

Your email address will not be published. Required fields are marked *