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;
  
}
  

Explanation

.social-icon-wrap: This class is used to wrap all the social media icons and provides a flexible, responsive layout using flexbox. The gap property adds spacing between the icons.

.social-icon-wrap.style5 a: This targets each social media icon and defines its size, background color, and text properties. The icons have a rounded, modern look with border-radius: 5px and smooth hover transitions.

Hover Effect: On hovering over each icon, the background changes to a solid color, and the icon turns white, creating a clean hover effect.

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.

Articles you may found Useful

 Team Section using HTML and CSS

 Top 3 Free Web development courses

 JavaScript Roadmap

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

Thanks For reading.