Animated social share button using HTML, CSS & javascript

social share button preview

Hello there, Today’s blog will teach you How To Make an animated social share button Using HTML, CSS, and a little bit of JavaScript as you can see in the preview image above.

You may also view the entire video tutorial.

Source Code

To begin, you must create three files: one HTML file, one CSS file, and one Js file. After you’ve created these files, simply copy and paste the following codes into your file.

HTML Code

First, create an HTML file called index.html and paste the following codes into it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social share button</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="share">
            <ol>
                <li><a href=""><i class="fab fa-linkedin"></i></a></li>
                <li><a href=""><i class="fab fa-facebook"></i></a></li>
                <li><a href=""><i class="fab fa-whatsapp"></i></a></li>
                <li><a href=""><i class="fab fa-twitter"></i></a></li>
            </ol>
          <div class="toggle"></div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS Code

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    display: grid;
    background: #edf7fa;
}
.wrapper{
    width:100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toggle{
    width:50px;
    height: 50px;
    background: #c70039;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}
.toggle::before{
    content: "\f1e0";
    width: 100%;
    height: 100%;
    position: absolute;
    color: white;
    line-height: 50px;
    font-family: "Font Awesome 5 Free";
    font-size: 22px;
    font-weight: 900;
    text-align: center;
}
.share{
    position: relative;
}
.share ol{
    position: absolute;
    width: 50px;
    height: 50px;
}
.share ol li{
    position: absolute;
    width: 50px;
    height: 50px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all .4s;
}
.share ol li a{
    color: white;
    font-size: 22px;
}
.share.active .toggle::before{
    content: "\f00d";
    font-size: 2rem;
}
.share.active ol li:nth-child(1){
    background: #0e76a8;
    transition-delay: 0.2s;
    transform: translateX(60px)
}
.share.active ol li:nth-child(2){
    background: #3b5998;
    transition-delay: 0.2s;
    transform: translateY(60px)
}
.share.active ol li:nth-child(3){
    background: #128c7e;
    transition-delay: 0.2s;
    transform: translateX(-60px)
}
.share.active ol li:nth-child(4){
    background: #1da1f2;
    transition-delay: 0.2s;
    transform: translateY(-60px)
}

JS Code

Third, create a JS file with the name of main.js and paste the given codes into your JS file.

const toggle=document.querySelector('.toggle');
toggle.addEventListener('click',()=>{
    const sharebtn=document.querySelector('.share');
    sharebtn.classList.toggle('active');
})

Thank you!!

I hope this post will be helpful in saving you time ️✌️and creating a nice animated social share button for your website. If you like, please share with others ❤️️ and let me know the topic you want to code for.

Other posts