CodewithLord

🧠 Description

Experience a modern and interactive share button that smoothly transitions to reveal social media icons on hover. Built with HTML, CSS, and JavaScript, this elegant UI component uses Lucide icons and animations to create a clean, responsive, and visually engaging sharing experience.

💻 HTML Code

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>Animated Share Button (Large)</title>
7  <link rel="stylesheet" href="style.css" />
8  <script src="https://unpkg.com/lucide@latest"></script>
9</head>
10<body>
11  <div class="center">
12    <button class="share-button large" id="shareBtn">
13      <div class="share-content">
14        <i data-lucide="share-2" class="icon"></i>
15        <span>Share</span>
16      </div>
17
18      <div class="share-icons">
19        <div class="icon github" data-platform="github" title="GitHub">
20          <i data-lucide="github"></i>
21        </div>
22        <div class="icon x" data-platform="x" title="X">
23          <i data-lucide="twitter"></i>
24        </div>
25        <div class="icon facebook" data-platform="facebook" title="Facebook">
26          <i data-lucide="facebook"></i>
27        </div>
28      </div>
29    </button>
30  </div>
31
32  <script src="script.js"></script>
33</body>
34</html>
35

The HTML file sets up the structure of the animated share button.

Head Section

Defines the page’s metadata and loads the external CSS file (style.css) and the Lucide icon library (used for SVG icons).

Body

Contains a centered div with a single button (share-button large).

The button has two parts:

.share-content — the default visible part of the button showing the “Share” text and share icon.

.share-icons — hidden initially; contains social media icons (GitHub, X, and Facebook), which appear when hovering over the button.

Each icon uses data-platform attributes to identify which platform it represents.

The script file (script.js) is linked at the bottom to handle functionality.

CSS Code

1body {
2  background: #f3f4f6;
3  font-family: "Poppins", sans-serif;
4  display: flex;
5  justify-content: center;
6  align-items: center;
7  height: 100vh;
8}
9
10.center {
11  display: flex;
12  justify-content: center;
13  align-items: center;
14}
15
16/* Base Share Button */
17.share-button {
18  position: relative;
19  background: #2563eb;
20  color: white;
21  border: none;
22  outline: none;
23  border-radius: 14px;
24  padding: 14px 38px;
25  font-size: 18px;
26  font-weight: 600;
27  display: inline-flex;
28  align-items: center;
29  justify-content: center;
30  gap: 12px;
31  cursor: pointer;
32  overflow: hidden;
33  transition: background 0.3s ease, transform 0.2s ease;
34  min-width: 200px;
35  min-height: 60px;
36}
37
38.share-button:hover {
39  background: #1e40af;
40  transform: scale(1.03);
41}
42
43/* Larger version */
44.share-button.large {
45  font-size: 20px;
46  padding: 18px 48px;
47  min-width: 240px;
48  min-height: 70px;
49  border-radius: 18px;
50}
51
52/* CONTENT (text + icon) */
53.share-content {
54  position: absolute;
55  display: flex;
56  align-items: center;
57  justify-content: center;
58  gap: 10px;
59  top: 0;
60  left: 0;
61  right: 0;
62  bottom: 0;
63  transition: all 0.3s ease;
64  opacity: 1;
65  transform: translateY(0);
66}
67
68/* SOCIAL ICONS SECTION */
69.share-icons {
70  position: absolute;
71  top: 100%;
72  left: 0;
73  right: 0;
74  display: flex;
75  justify-content: center;
76  gap: 20px;
77  opacity: 0;
78  transform: translateY(25px);
79  transition: all 0.4s ease;
80}
81
82/* Individual icons */
83.share-icons .icon {
84  background: transparent;
85  color: white;
86  cursor: pointer;
87  transition: transform 0.3s ease, color 0.3s ease;
88}
89
90.share-icons .icon:hover {
91  transform: translateY(-8px);
92  color: #93c5fd;
93}
94
95/* Hover effect to swap content */
96.share-button:hover .share-content {
97  opacity: 0;
98  transform: translateY(-28px);
99}
100
101.share-button:hover .share-icons {
102  opacity: 1;
103  transform: translateY(2);
104  top: 0;
105}
106
107/* Icon sizing */
108.icon svg {
109  width: 28px;
110  height: 28px;
111}
112

The CSS controls the design, layout, and animation of the button.

Page Layout

The body is centered vertically and horizontally using flex.

Uses a light gray background and Poppins font for a clean modern style.

Button Styling (.share-button)

The button is blue (#2563eb), rounded, and slightly enlarges (scale(1.03)) when hovered.

It’s positioned relative so its inner content can be absolutely positioned for animation.

transition is added to create smooth hover animations.

Button Variants

.large adds bigger padding, font size, and radius for a large version.

.share-content

This is the part showing the text “Share” and the share icon by default.

It’s centered absolutely inside the button.

It fades and moves upward when hovered (opacity: 0; transform: translateY(-28px)).

.share-icons

Initially hidden (opacity: 0, placed below view using top: 100% and translateY(25px)).

When hovered, it moves into view (top: 0) and becomes visible (opacity: 1).

.icon

Each icon is clickable and changes color/position slightly on hover (translateY(-8px) and color: #93c5fd).

Smooth Transitions

Both .share-content and .share-icons use transitions for smooth animations.

Javascipt Code

1lucide.createIcons();
2
3document.querySelectorAll(".share-icons .icon").forEach((icon) => {
4  icon.addEventListener("click", (e) => {
5    const platform = e.currentTarget.getAttribute("data-platform");
6    if (platform === "github") {
7      window.open("https://github.com/", "_blank");
8    } else if (platform === "x") {
9      window.open("https://x.com/", "_blank");
10    } else if (platform === "facebook") {
11      window.open("https://facebook.com/", "_blank");
12    }
13  });
14});
15
16

The JavaScript file (script.js) controls the behavior when users click on any social media icon.

lucide.createIcons()

This line replaces all tags with SVG icons provided by the Lucide library.

Icon Click Functionality

The script selects all icons inside .share-icons.

For each icon, it listens for a click event.

When clicked:

It reads the data-platform attribute to know which platform was clicked.

Depending on the platform, it opens the corresponding website (GitHub, X, or Facebook) in a new browser tab using window.open().

Animated Social Share Button | Interactive Hover Effects using HTML, CSS & JavaScript

🧠 Description

💻 HTML Code

CSS Code

Javascipt Code

Love this component?