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).
<!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
.wrapperholds all buttons. - Each
.buttoncontains:.iconwhich 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
.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.
.wrapper .button:hover {
width: 200px;
}
✔ When hovered, the button expands from a circle to a long pill shape, revealing the text.
