Social Media Icons with Hover Effects Using HTML and CSS

Adding social media icons to your website is a great way to connect with your audience and provide easy access to your social profiles. In this blog post, I'll walk you through a simple HTML and CSS project that showcases how to create beautiful, responsive social media icons with hover effects using Font Awesome and custom CSS styles.

Prerequisites

• Basic understanding of HTML and CSS.
• Familiarity with Font Awesome icons.

Step 1: HTML Structure for Social Icons

The first step is to create the basic HTML structure that will hold the social media icons. We'll be using Font Awesome icons for the social platforms and links to the your social media profiles.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

<div class="social-icon-wrap style5">
    <a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook-f"></i></a>
    <a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
    <a href="https://pinterest.com/" target="_blank"><i class="fab fa-pinterest-p"></i></a>
    <a href="https://linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>

Step 2: CSS Styling for Icons

Now that we have the HTML file, it's time to style the icons using CSS. We'll create a sleek and modern design with background colors, padding, and hover effects.

.social-icon-wrap {
    display: flex;
    position: relative;
    text-align: center;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 20px;
}

.social-icon-wrap.style5 a {
    background: #EBF6FF;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 5px;
    color: #0064B0;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 500ms ease;
}

.social-icon-wrap.style5 a:hover {
    background-color: #0064B0;
    color: #fff;
}

Step 3: Adding Hover Effects

When a user hovers over any of the icons, the background changes to a dark blue color, and the icon itself turns white.

.social-icon-wrap.style5 a:hover {
   background-color: #0064B0;
   color: #fff;
}

This CSS snippet adds a subtle yet effective hover transition with a 500ms duration, ensuring a smooth visual effect.

Conclusion
In just a few simple steps, you've learned how to create stylish social media icons using Font Awesome and custom CSS. These icons are fully responsive and include hover effects to enhance user engagement.

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.