How to Create Stylish Social Media Follow me Buttons for Your Blog

In this tutorial, we'll walk you through creating stylish and functional social media share buttons for your blog. These buttons will allow users to easily share your content across various social media platforms. We’ll use HTML and CSS, and incorporate Font Awesome for the icons.

What You'll Learn

  • Setting Up the HTML Structure
  • Styling Buttons with CSS
  • Incorporating Font Awesome Icons
  • Testing Your Buttons

1. Setting Up the HTML Structure

Start by setting up a basic HTML structure. This includes the document declaration, <html>, <head>, and <body> elements. Here’s a simple template:

<!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>
        /* Your CSS will go here */
    </style>
</head>
<body>
    <div class="social-buttons">
        <!-- Social media buttons will go here -->
    </div>

    <!-- Include Font Awesome for the icons -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
</body>
</html>

2. Styling Buttons with CSS

Next, you'll style the social media buttons using CSS. Add the following styles to the <style> tag in the <head> section of your HTML document:

.button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #007BFF;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
.button:hover {
    background-color: #0056b3;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
.social-buttons a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-weight: bold;
}
.social-buttons a i {
    margin-right: 10px;
}
.social-buttons a.facebook { background-color: #3b5998; }
.social-buttons a.twitter { background-color: #1DA1F2; }
.social-buttons a.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-buttons a.threads { background-color: #000; }
.social-buttons a.tiktok { background-color: #010101; }
.social-buttons a.youtube { background-color: #FF0000; }
.social-buttons a.snackvideo { background-color: #FFD700; color: #000; }
.social-buttons a.linkedin { background-color: #0077b5; }
.social-buttons a:hover {
    opacity: 0.7;
}

3. Incorporating Font Awesome Icons

Font Awesome provides a wide range of icons that can be used for social media buttons. To include Font Awesome in your project, add this script tag before the closing </body> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>

Now, add the social media buttons within the <div class="social-buttons"> element. Here’s the code for various platforms:

<div class="social-buttons">
    <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_PAGE_URL" class="facebook" target="_blank">
        <i class="fab fa-facebook-f"></i> Facebook
    </a>

    <a href="https://twitter.com/intent/tweet?url=YOUR_PAGE_URL&text=Check%20this%20out!" class="twitter" target="_blank">
        <i class="fab fa-twitter"></i> Twitter
    </a>

    <a href="https://www.instagram.com/borneolux" class="instagram" target="_blank">
        <i class="fab fa-instagram"></i> Instagram
    </a>

    <a href="https://www.threads.net/borneolux" class="threads" target="_blank">
        <i class="fab fa-threads"></i> Threads
    </a>

    <a href="https://www.tiktok.com/@borneolux" class="tiktok" target="_blank">
        <i class="fab fa-tiktok"></i> TikTok
    </a>

    <a href="https://www.youtube.com/c/borneolux" class="youtube" target="_blank">
        <i class="fab fa-youtube"></i> YouTube
    </a>

    <a href="https://www.snackvideo.com/user/borneolux" class="snackvideo" target="_blank">
        <i class="fab fa-snackvideo"></i> SnackVideo
    </a>

    <a href="https://www.linkedin.com/in/borneolux" class="linkedin" target="_blank">
        <i class="fab fa-linkedin-in"></i> LinkedIn
    </a>
</div>

4. Testing Your Buttons

Finally, make sure to test your buttons to ensure they work correctly. Click each button to verify that it directs you to the intended social media sharing page. You may need to replace placeholder URLs (YOUR_PAGE_URL) with the actual URL of your blog post or page.

By following this tutorial, you’ve created a set of stylish social media share buttons that can enhance user interaction on your blog. These buttons not only allow users to share your content but also add a touch of professionalism and design to your website. Feel free to customize the styles and icons to match your blog’s design and branding.

Comments

Post a Comment