Table of contents

Introduction

How to Style Social Media Buttons

2.1.

Example: Basic Social Media Buttons

Square Example

3.1.

Example: Square Social Media Icons

Round Buttons

4.1.

Example: Round Social Media Buttons

Frequently Asked Questions

5.1.

Can I use images instead of text for social media buttons?

5.2.

How can I add hover effects to my social media buttons?

5.3.

Is it necessary to use external libraries for styling social media buttons?

Conclusion

Last Updated: Mar 3, 2025

Medium

Social Media Icons in HTML

Author Pallavi singh

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

Social media icons in HTML allow you to add clickable links to platforms like Facebook, Twitter, Instagram, and LinkedIn. These icons help users connect with you on different social networks. You can use font-based icons (like Font Awesome), SVG icons, or image icons to display them.

In this article, you will learn different methods to add social media icons in HTML and how to style them using CSS.

How to Style Social Media Buttons

Social media buttons can be styled using HTML and CSS to match the design of a website. You can customize their color, shape, size, and hover effects to enhance the user experience. Below is an example of how to create basic social media buttons using HTML and CSS.

Example: Basic Social Media Buttons

<!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>
    <style>
        .social-buttons {
            display: flex;
            gap: 10px;
        }
        .social-buttons a {
            text-decoration: none;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 18px;
        }
        .facebook { background: #3b5998; }
        .twitter { background: #1da1f2; }
        .instagram { background: #e4405f; }
        .linkedin { background: #0077b5; }
    </style>
</head>
<body>
    <div class="social-buttons">
        <a href="#" class="facebook">Facebook</a>
        <a href="#" class="twitter">Twitter</a>
        <a href="#" class="instagram">Instagram</a>
        <a href="#" class="linkedin">LinkedIn</a>
    </div>
</body>
</html>

Output:

This code creates simple social media buttons with different background colors.

Square Example

Square social media buttons have sharp edges and are commonly used in modern web design. You can customize their styles further by adjusting padding and background colors.

Example: Square Social Media Icons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Square Social Media Buttons</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        .square-buttons {
            display: flex;
            gap: 10px;
        }

        .square-buttons a {
            display: inline-block;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 20px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 0;
        }

        /* Social Media Colors */
        .facebook { background-color: #3b5998; }
        .twitter { background-color: #1da1f2; }
        .instagram { background-color: #e4405f; }
        .linkedin { background-color: #0077b5; }

        /* Hover Effect */
        .square-buttons a:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>

    <div class="square-buttons">
        <a href="#" class="facebook">F</a>
        <a href="#" class="twitter">T</a>
        <a href="#" class="instagram">I</a>
        <a href="#" class="linkedin">L</a>
    </div>

</body>
</html>

Output

Output: Square social media buttons with equal width and height.

Round Buttons

Round social media buttons have a circular shape, making them visually appealing. To achieve this, we use border-radius: 50% in CSS.

Example: Round Social Media Buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Round Social Media Buttons</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        .round-buttons {
            display: flex;
            gap: 10px;
        }

        .round-buttons a {
            display: inline-block;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            font-size: 20px;
            font-weight: bold;
            text-decoration: none;
            border-radius: 50%;
            transition: 0.3s ease-in-out;
        }

        /* Social Media Colors */
        .facebook { background-color: #3b5998; }
        .twitter { background-color: #1da1f2; }
        .instagram { background-color: #e4405f; }
        .linkedin { background-color: #0077b5; }

        /* Hover Effect */
        .round-buttons a:hover {
            opacity: 0.8;
            transform: scale(1.1);
        }
    </style>
</head>
<body>

    <div class="round-buttons">
        <a href="#" class="facebook">F</a>
        <a href="#" class="twitter">T</a>
        <a href="#" class="instagram">I</a>
        <a href="#" class="linkedin">L</a>
    </div>

</body>
</html>

Output:

Circular social media buttons with a smooth, rounded design.

Frequently Asked Questions

Can I use images instead of text for social media buttons?

Yes, you can replace text with icons or images using <img> tags or font-awesome icons.

How can I add hover effects to my social media buttons?

You can use the :hover selector in CSS to change the background color or add animations when the user hovers over a button.

Is it necessary to use external libraries for styling social media buttons?

No, you can style them using pure HTML and CSS, but external libraries like Font Awesome can help enhance their appearance.

Conclusion

In this article, we explored how to add social media icons in HTML using Font Awesome, SVG, or image links. These icons link to social profiles like Facebook, Twitter, LinkedIn, and Instagram. Using CSS for styling and hover effects enhances their appearance. Understanding social media icons helps improve website engagement and connectivity with users.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

434+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

311+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

434+ registered

View more events