Sticky Social Media Floating Sidebar html

Today, We want to share with you Sticky Social Media Floating Sidebar html.In this post we will show you fixed social media sidebar css, hear for social media icons hover effect css we will give you demo and example for implement.In this post, we will learn about html code for social media buttons to website with an example.

Sticky Social Media Floating Sidebar html

There are the Following The simple About Sticky Social Media Floating Sidebar html Full Information With Example and source code.

As I will cover this Post with live Working example to develop How to Create Sticky Social Media Floating Sidebar with CSS, so the Create Sticky Social Media Floating Sidebar With CSS for this example is following below.

Also Read :  Get Laravel Route Parameters

Step 1: Html Part

simple HTML Code Placed the following some HTML in the main body element of the web page, as well as insert your social profile Like as youtube, LinkedIn, Facebook, Google links to the respective social icons.

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

Step 2: Css Part

.social-sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.social-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;
}
.social-sticky li:hover{
    margin-left:-115px;
}
.social-sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.social-sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.social-sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.social-sticky li p a:hover{
    text-decoration:underline;
}

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  Creating jQuery Animation Effects using Inbuilt Methods

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Sticky Social Media Floating Sidebar html.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

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