Share Button Animation Using HTML & CSS

In this article, you will learn how to create social share buttons using HTML and CSS to make your website more shareable. Following up on my previous blog post, I will be focusing on animating a share button and incorporating social media icons.

Share button with both social share is eye-catching and attractive share button not only encourages users to share the content with others but also adds value to the overall design of the website. In today’s world, where visual content plays a critical role in creating an impact, adding animations to share buttons can make them more appealing and effective.

How To Create Social Share are Button Using HTML CSS

Create a Folder: Start by creating a folder for your project. You can name it anything you like. Inside this folder, you’ll need to create the following files:

index.html (for the structure of your Social Share Button)
style.css (for styling the Social Share Button)

Create the HTML File:

Name your HTML file index.html.

Create the CSS File:

Name your CSS file style.css.

Step 1: Create HTML Structure

To start, we need to create the HTML structure for our social share button. We will use a <div> element with a class of “share-btn” to wrap our button.

				
					<!DOCTYPE html>
<!-- NotArena || www.NotArena.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Share Button</title>
    <link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-3653a716-55b9-49a9-8f2e-b8ec5933c8d4: url('https://notarena.com/wp-content/plugins/ultimate-post/assets/img/loading.gif');}.elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-8d9426ab-3aac-4ddd-954f-43f1e21586b0: url('https://i0.wp.com/notarena.com/wp-content/uploads/2024/10/BG.png?fit=1200%2C726&ssl=1');}.rll-youtube-player .play{--wpr-bg-77ffd077-2b31-4b01-889a-7ea737c6b3c9: url('https://notarena.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".ultp-block-wrapper .slick-loading .slick-list","style":".ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-3653a716-55b9-49a9-8f2e-b8ec5933c8d4: url('https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif');}","hash":"3653a716-55b9-49a9-8f2e-b8ec5933c8d4","url":"https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif"},{"selector":".elementor-1911 .elementor-element.elementor-element-2e43d051, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-8d9426ab-3aac-4ddd-954f-43f1e21586b0: url('https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1');}","hash":"8d9426ab-3aac-4ddd-954f-43f1e21586b0","url":"https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-77ffd077-2b31-4b01-889a-7ea737c6b3c9: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"77ffd077-2b31-4b01-889a-7ea737c6b3c9","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
    <div class="share-container">
        <div class="share-btn">
            <i class="fas fa-share-alt"></i> Share
        </div>
        <div class="social-icons">
            <a href="#" class="social facebook">
                <i class="fab fa-facebook-f"></i>
                <span>Facebook</span>
            </a>
            <a href="#" class="social twitter">
                <i class="fab fa-twitter"></i>
                <span>Twitter</span>
            </a>
            <a href="#" class="social linkedin">
                <i class="fab fa-linkedin-in"></i>
                <span>LinkedIn</span>
            </a>
            <a href="#" class="social instagram">
                <i class="fab fa-instagram"></i>
                <span>Instagram</span>
            </a>
        </div>
    </div>

    <!-- Font Awesome CDN for social icons -->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/notarena.com\/wp-admin\/admin-ajax.php","nonce":"f787b24636","url":"https:\/\/notarena.com\/code-library\/share-button-animation-using-html-css","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://notarena.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

Step 2: Design the Button with CSS

Second, we will use CSS to style our social share button.

				
					  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #faf5ffcb;
}

.share-container {
    position: relative;
}

.share-btn {
    width: 100px;
    height: 40px;
    background: linear-gradient(45deg, #ff7e5f, #feb47b);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s ease;
    font-size: 16px;
    color: white;
}

.social-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 15px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

.social {
    width: 120px;
    height: 40px;
    background: linear-gradient(45deg, #4776e6, #8e54e9); /* Gradient color */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 0 10px;
}

.social i {
    margin-right: 8px;
}

.social:hover {
    transform: scale(1.1); /* Scale up on hover */
}

.social-icons span {
    display: inline-block;
}

.share-container:hover .social-icons {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -120%);
}

.share-container:hover .share-btn {
    transform: scale(0);
}

@media (max-width: 768px) {
    .social {
        width: 100px;
        font-size: 12px;
    }

    .share-btn {
        width: 80px;
        height: 35px;
        font-size: 14px;
    }
}

We have seen how to create social share buttons using HTML and CSS. With a few lines of code, we have created a beautiful and interactive share button that will make your website more shareable. Feel free to experiment with different styles and effects to make it unique to your website. With these social share buttons, you can encourage your visitors to share your content and increase your online presence.

If the code doesn’t work or if you run into any issues, please leave a comment below or reach out to us through the contact page.