How to Style Social Media Buttons with CSS

Introduction

Styling social media buttons is a common design element on websites that encourages users to share content or visit your social media profiles. You can style social media buttons with icons, colors, and hover effects using CSS. Each social media platform typically has its own brand color, so applying these colors helps users recognize the platform at a glance.

In this tutorial, you'll learn how to style social media buttons with CSS using platform-specific colors and icons.

Development Steps

Use the <a> Element: Create buttons as clickable links using the <a> tag.
Add Social Media Icons: Use Font Awesome or another icon library for social media icons.
Style the Buttons: Use CSS to apply colors, padding, and rounded shapes.
Add Hover Effects: Apply hover effects to make the buttons interactive.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Buttons</title>
    <!-- Include Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* Step 1: General button styles */
        .social-button {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            margin: 10px;
            text-align: center;
            border-radius: 50%;
            color: white;
            font-size: 24px;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        /* Step 2: Specific colors for each social media platform */
        .facebook {
            background-color: #3b5998;
        }

        .twitter {
            background-color: #1da1f2;
        }

        .instagram {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        }

        .linkedin {
            background-color: #0077b5;
        }

        .youtube {
            background-color: #ff0000;
        }

        /* Step 3: Hover effects */
        .social-button:hover {
            transform: scale(1.1); /* Slightly increases size on hover */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow on hover */
        }

        /* Optional: Add text next to icons */
        .social-button span {
            margin-left: 10px;
            vertical-align: middle;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 50px;">
        <!-- Facebook Button -->
        <a href="#" class="social-button facebook">
            <i class="fab fa-facebook-f"></i>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="social-button twitter">
            <i class="fab fa-twitter"></i>
        </a>

        <!-- Instagram Button -->
        <a href="#" class="social-button instagram">
            <i class="fab fa-instagram"></i>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="social-button linkedin">
            <i class="fab fa-linkedin-in"></i>
        </a>

        <!-- YouTube Button -->
        <a href="#" class="social-button youtube">
            <i class="fab fa-youtube"></i>
        </a>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: General Button Styles

The .social-button class is applied to all social media buttons to ensure they share the same structure and base styles. The buttons are displayed as circles with icons centered inside.

.social-button {
    display: inline-block;
    width: 50px; /* Button width */
    height: 50px; /* Button height */
    line-height: 50px; /* Centers the icon vertically */
    margin: 10px; /* Space between buttons */
    text-align: center; /* Centers the icon horizontally */
    border-radius: 50%; /* Makes the buttons circular */
    color: white; /* White icon color */
    font-size: 24px; /* Icon size */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover transition */
}

width: 50px and height: 50px: Set the size of the button.
border-radius: 50%: Ensures the button is circular.
transition: transform 0.3s ease: Adds a smooth hover animation.

Step 2: Platform-Specific Colors

Each social media platform is styled with its respective brand color:

.facebook {
    background-color: #3b5998; /* Facebook blue */
}

.twitter {
    background-color: #1da1f2; /* Twitter blue */
}

.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram gradient */
}

.linkedin {
    background-color: #0077b5; /* LinkedIn blue */
}

.youtube {
    background-color: #ff0000; /* YouTube red */
}

background-color: Sets the background color for each platform.
background: linear-gradient(): Uses a gradient background for Instagram to match its branding.

Step 3: Hover Effects

When the user hovers over a button, the button scales slightly, and a shadow effect is added to create depth.

.social-button:hover {
    transform: scale(1.1); /* Slightly increases the size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a soft shadow */
}

transform: scale(1.1): Enlarges the button by 10% on hover.
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2): Adds a shadow to the button on hover for a 3D effect.

Step 4: Add Text (Optional)

You can add text next to the icons if you want labeled social buttons. Use the <span> tag within the button and style it appropriately.

<a href="#" class="social-button facebook">
    <i class="fab fa-facebook-f"></i> <span>Facebook</span>
</a>

Then, style the text to align properly with the icon:

.social-button span {
    margin-left: 10px;
    vertical-align: middle;
    font-size: 16px; /* Text size */
}

Customization

Change Button Size

To make the buttons larger or smaller, adjust the width, height, and font-size values:

.social-button {
    width: 60px;
    height: 60px;
    font-size: 28px; /* Larger icon */
}

Change Hover Effect

You can change the hover effect by adjusting the transform and box-shadow properties. For example, to rotate the button on hover:

.social-button:hover {
    transform: rotate(360deg); /* Full rotation on hover */
}

Add a Border or Outline

To add a border or outline to the buttons, apply the border property:

.social-button {
    border: 2px solid white; /* White border */
}

.social-button:hover {
    border-color: #ddd; /* Change border color on hover */
}

Make Buttons Square Instead of Round

If you prefer square buttons, remove the border-radius property:

.social-button {
    border-radius: 0; /* Removes rounded corners */
}

Conclusion

Styling social media buttons with CSS is simple and effective, especially when using platform-specific colors and icons. You can create engaging and recognizable buttons by applying hover effects, changing the size, and adding other visual enhancements like shadows and borders. These buttons can be customized further to match your website's design while maintaining the distinctive look of each social media platform.

Java Guides

Search This Blog