Logical Python

Logical Python
Random News

Magic Social Media Icons

logical04 mins

This is a small, self-contained UI that shows expandable social media buttons (Facebook, Twitter, Instagram, YouTube). Each button is a circular icon that expands horizontally on hover to reveal the platform name. The HTML is minimal (structure and Font-Awesome icons) and the CSS handles layout, visuals, hover transitions and platform colors.

index.html

Key idea: each social button is a .button element containing an .icon with a Font-Awesome <i> and a <span> for the label. The HTML links the stylesheet and loads the Font Awesome CDN in the body (so icons render).

Copy Code
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Social Media Icons by Kode Gurukul</title>
        <link rel="stylesheet" href="./style.css" />
    </head>

    <body>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        />
        <div class="wrapper">
            <div class="button">
                <div class="icon">
                    <i class="fab fa-facebook-f"></i>
                </div>
                <span>Facebook</span>
            </div>
            <div class="button">
                <div class="icon">
                    <i class="fab fa-twitter"></i>
                </div>
                <span>Twitter</span>
            </div>
            <div class="button">
                <div class="icon">
                    <i class="fab fa-instagram"></i>
                </div>
                <span>Instagram</span>
            </div>
            <div class="button">
                <div class="icon">
                    <i class="fab fa-youtube"></i>
                </div>
                <span>YouTube</span>
            </div>
        </div>
    </body>
</html>

Explanation:

  • The .wrapper holds all buttons.
  • Each .button contains:
    • .icon which holds the <i class="fab ..."> Font Awesome icon.
    • a <span> containing the text label that appears when the button expands.
  • The page imports Font Awesome from a CDN so the .fab (brand) icons render.
  • The HTML is intentionally simple; all interaction and animation is done via CSS hover states.

style.css

Copy Code
.wrapper .button {
    height: 60px;
    width: 60px;
    overflow: hidden;
    border-radius: 50px;
    transition: all 0.3s ease-out;
}

✔ This creates the round icon button (60×60).
✔ overflow: hidden hides the text until hover.
✔ transition allows smooth animation.

Copy Code
.wrapper .button:hover {
    width: 200px;
}

✔ When hovered, the button expands from a circle to a long pill shape, revealing the text.

Download Code

Related Post