Social Media Icons using HTML CSS 

In this HTML and CSS code, you'll learn how to create stylish social media icons with hover effects. These icons are designed using the Font Awesome library and are displayed in a grid layout. When you hover over each icon, it expands to reveal the social media platform's brand color along with its name.

The code begins by linking to the Font Awesome CSS library to use its icons. It then sets up the HTML structure for the social media icons, each wrapped in a container with the class "button." Inside each button, there's an icon represented by the "fab" class followed by the specific social media platform's class (e.g., "fab fa-facebook-f" for Facebook) and a text label for the platform.

The CSS styles are used to create a visually appealing layout and hover effects for the icons. The entire page is centered both vertically and horizontally with a background gradient. The icons are initially displayed as small circles with a white background and a subtle box shadow. When you hover over them, they expand to a larger size, revealing the platform's brand color as the background for the icon.

The transition effects provide smooth animations when hovering over the icons. The color of the icons and text labels changes to match the respective social media brand colors when you hover over them.     

Watch Tutorial

      GitHub