best css floating social media share buttons for website:codingtuting

Social Media Share buttons are an important part of every website. It helps our website viewers and readers to connect with us via many platforms. Generally, websites have social media share buttons on top header and footer.

So people use to scroll up and scroll down to find the social media icons/buttons. This kinds of social media sharing buttons are not much effective, because it is invisible most of the time on the screen. So today we'll see the Fixed Social Media Share Buttons.

These buttons are permanently fixed in the middle of the screen. And it is responsive too. Many newbies web developers and designers look for How To Add Social Media Share Button on the website?

So today you'll get the beautiful solution of How to Add Floating Social Media Buttons to Website. Many bloggers download the plugins to add Social Media Sharing Buttons on their blog/website.

And these plugins make the website heavy and the website takes a long time to load in a web browser. Because most plugins contain HTML, CSS along with JavaScript and jQuery But our Social Media Share Buttons are too light.

These are built-in pure HTML and CSS. You can add these Floating and Fixed Social Media Share Button in your Blogger website, WordPress website, etc. These works with hover effects. These are the few lines of code.

Just add this HTML design and CSS in your website.

See this Preview of Fixed and Floating Social Media Share Button

CSS Fixed & Floating Social Media Share Button with Source Code

Let's understand the source code.

I'm using font-awesome .svg icons in my code. You can use it too or any others as you like.

I created the basic design in HTML. Then I placed social media icons in <a> tag in a divesion <div>. Then I gave position:fixed and other CSS to locate the vertically center to this division
I gave descriptive ID to the each icon's parent <a> tag. And a common class my-social to the each icon.
I applied the appropriate CSS for colors, margins, and padding to all icons.
I gave float:right to the all icons for the maintain the reverse order of the tabindex.
I selected to the all <a> tags except the first one using this selector #social-share a:not(:first-child)
I defined the CSS3 Keyframe Animation for the fade-in effect. I used 4 different CSS3 Keyframe Animation Code for supports to all browsers.
Then I used the hover effect CSS by selecting the <a> element except first child.

Above is the summary of understanding the source code. Please focus on this full source code and try to understand it. If you've any doubt please let me know in the comment.

SocialShare.html

<!DOCTYPE html>
<!-- Code by CodingTuting.Com Jignesh Panchal -->
<html>
    <head>
        <title>Social Share</title>
        <link rel="stylesheet" href="css/style.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

        <div id="social-share">
          
            <a href="#" title="Social Share" id="share">
                <i class="fas fa-share-alt my-social"></i>
            </a>

            <a href="#YWhatsapp url" target="_blank" title="Instagram" id="instagram">
                <i class="fab fa-instagram my-social"></i>
            </a>
                        
            <a href="#YReddit url" target="_blank" title="Reddit" id="reddit">
                <i class="fab fa-reddit-alien my-social"></i>
            </a>            

            <a href="#YLinkedin url" target="_blank" title="Linkedin" id="linkedin">
                <i class="fab fa-linkedin-in my-social"></i>
            </a>

            <a href="#YWhatsapp url" target="_blank" title="Whatsapp" id="whatsapp">
                <i class="fab fa-whatsapp my-social"></i>
            </a>
            
            <a href="#Ytwitter url" target="_blank" title="Twitter" id="twitter">
                <i class="fab fa-twitter my-social"></i>
            </a>

            <a href="#Yfacebook url" target="_blank" title="Facebook" id="facebook">
                <i class="fab fa-facebook-f my-social"></i>
            </a>

        </div>

    </body>
</html>

Style.css

/* CSS Code by CodingTuting.Com Jignesh Panchal */
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }    
    100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
    0% { opacity: 0; }    
    100% { opacity: 1; }
}

@-o-keyframes fadeIn {
    0% { opacity: 0; }    
    100% { opacity: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; }    
    100% { opacity: 1; }
}

    #social-share {
        position: fixed;
        right: 0px;
        top: 50%;
        z-index:10;
    }
   
        #social-share a {
            text-decoration: none;
            float: right;
        }

        #social-share a:not(:first-child) {
            animation:fadeOut 0.5s;
            display: none;
        }        

        #social-share:hover a:not(:first-child) {
            display: inline;
            -webkit-animation: fadeIn 0.5s;
            -moz-animation: fadeIn 0.5s;
            -o-animation: fadeIn 0.5s;
            animation: fadeIn 0.5s;
        }

        #social-share:hover .fa-share-alt {
            border-radius: 0px;
        }
                     
        #social-share a .my-social {
            border-right: 0;
        }

        #social-share a .fa-facebook-f {
            padding: 8px 12px;
            color: #3F51B5;
            border-radius: 3px 0px 0px 3px;
        }
        
        #social-share a .fa-twitter {
            color:#87ceeb;
        }

        #social-share a .fa-whatsapp {
            color:#008000;
        }

        #social-share a .fa-linkedin-in {
            color:#607d8b;
        }

        #social-share a .fa-reddit-alien {
            color:#ff6c00;
        }

        #social-share a .fa-instagram {
            color:#ff1740;
            padding: 8px 11px;
        }
        
        #social-share > a > .fa-share-alt {            
            color: #2196f3;
            border-right: 0;
            padding: 8px 10px;   
            border-radius: 3px 0px 0px 3px;    
        }
         
        #social-share #facebook:focus > .fa-facebook-f, #social-share .fa-facebook-f:hover {
            background-color: #3F51B5;
            border-color:#3F51B5;
            color: #fff;
        }
        
        #social-share #twitter:focus > .fa-twitter, #social-share .fa-twitter:hover {
            background-color:#87ceeb;
            border-color: #87ceeb;
            color:#fff;
        }
        
        #social-share #whatsapp:focus > .fa-whatsapp, #social-share .fa-whatsapp:hover {
            background-color:#008000;
            border-collapse: #008000;;
            color:#fff;
        }
        
        #social-share #linkedin:focus > .fa-linkedin-in, #social-share .fa-linkedin-in:hover {
            background-color:#607d8b;
            border-collapse: #607d8b;;
            color:#fff;
        }
        
        #social-share #reddit:focus > .fa-reddit-alien, #social-share .fa-reddit-alien:hover {
            background-color:#ff6c00;
            border-collapse: #ff6c00;;
            color:#fff;
        }
        
        #social-share #instagram:focus > .fa-instagram, #social-share .fa-instagram:hover {
            background-color:#ff1740;
            border-collapse: #ff1740;
            color:#fff;
        }
        
        #social-share #share:focus > .fa-share-alt, #social-share .fa-share-alt:hover {
            color: #fff;
            background-color: #2196f3;
            border-color: #2196f3;
        }

        .my-social {
            font-size: 1.5em;
            border: 1px solid #3F51B5;
            padding: 8px 10px;
            cursor: pointer;
            transition: all 0.4s ease-out;
            -webkit-transition: all .4s ease-out;
            -moz-o-trasition: all .4s ease-out;
            -o-trasition: all .4s ease-out;
        }

We hope you got - How to Add Social Media Share Button in Website. If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.

Sharing is Caring

Thanks for Reading

Keywords & Queries covered in this tutorials are:

Author : Jignesh Panchal

Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

11 Comments

Write Comments

Rahul Chhaniwal

June 27, 2019 at 2:22 PM delete

Very interesting and useful for all. You did great job.

Jignesh Panchal

February 15, 2020 at 8:24 PM delete

Thank you Rahul...........

John

February 28, 2020 at 5:13 PM delete

hfghg

Gary White

February 28, 2020 at 5:18 PM delete

I will prefer this blog because it has much more informative stuff.
my link

Unknown

March 6, 2020 at 5:12 AM delete

Thank you.
I want to ask one question.
When you click or scroll the floor on mobile
I want to close the open icons.
Is it possible?
I can't do that now.

March 6, 2020 at 5:19 AM delete

[The above question is wrong and will be rewritten.]
Thank you.
I want to ask one question.
When I click or scroll the post on mobile.
I want to close the open icons.
Is it possible?
I can't do that now.

March 6, 2020 at 7:18 AM delete

I have a question above. I want to explain in more detail.
The sns icon appears when press the fa-share-alt button on mobile,
but it does not close when click the fa-share-alt button again.
Can't it be closed? pelase.