9 Social Share Button Design Embed Widgets

Auto-plays · click a tile to jump to its section · all nine in one zip

• 01 Social share button row
• 02 Video embed play-button overlay
• 03 X post embed card mock
• 04 Testimonial review embed widget
• 05 Map location embed card
• 06 Podcast player embed widget
• 07 GitHub repo stats card embed
• 08 Newsletter signup embed widget
• 09 Live chat bubble embed launcher

The order isn't popularity — it's the sequence a visitor actually meets while reading a post. A share row at the bottom (01) comes first, then an eye-catching video card (02), then trust-builders like an X post (03) and a testimonial (04), then a location card (05) that turns a reader into a visitor. Podcast (06) and GitHub (07) give more to explore, a newsletter card (08) tries to keep them before they leave, and a chat bubble (09) stays on screen the whole time.

01Social share button row

Four pastel circular buttons — pink, mint, lilac, sky — pop up one after another with a quick scale bounce. Use it in a share row at the bottom of a post or the social-share spot on a product page.

.btn { animation: pop $duration $easing infinite; }
.pink  { background: $subject-pink;  animation-delay: 0s; }
.mint  { background: $subject-mint;  animation-delay: .15s; }
.lilac { background: $subject-lilac; animation-delay: .3s; }
.sky   { background: $subject-sky;   animation-delay: .45s; }
@keyframes pop {
  0%, 40%, 100% { transform: scale(1); }
  15% { transform: scale(1.16); }
  25% { transform: scale(.94); }
}

The link button really calls navigator.clipboard.writeText(), and the like button toggles aria-pressed to keep the pressed state.

02Video embed play-button overlay

A white ring around the play button on a dark thumbnail expands and fades like a radar ping. It never loads a real YouTube iframe — it's a CSS placeholder card for the moment before the real player loads.

.ring {
  border: 2px solid rgba(255, 255, 255, .5);
  animation: ping $duration $easing infinite;
}
@keyframes ping {
  0% { opacity: .55; transform: scale(.8); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}

Clicking swaps the icon between play and pause, and the progress bar really fills through requestAnimationFrame — there is no actual video file behind it.

03X post embed card mock

The heart icon breathes — scale and opacity rising and falling — to hint that it's clickable. It never calls the real X API, so it stands in for a screenshot of a social reaction on a testimonial page.

.heart { animation: breathe $duration $easing infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.45); opacity: 1; }
}
.likeActive .heart { animation: bump 220ms $ease-pop; }

Clicking like or repost really bumps the count and changes color — every number on screen only lives inside this one card.

04Testimonial review embed widget

Five stars pop in one by one, left to right, with a bounce. Use it for card-style reviews on a testimonials page or the customer-review section of a landing page.

.star { animation: star $duration $easing infinite; }
@keyframes star {
  0% { transform: scale(0); opacity: 0; }
  12% { transform: scale(1.3); opacity: 1; }
  20%, 100% { transform: scale(1); opacity: 1; }
}

The helpful button carries aria-pressed for its pressed state, and clicking it actually increments the count.

05Map location embed card

The map pin drops in from above with a small bounce before settling. Use it as a location card on a store or office intro page, or the directions section of a contact page.

.pin { animation: drop $duration $easing infinite; }
@keyframes drop {
  0% { transform: translate(-50%, -220%); opacity: 0; }
  35% { transform: translate(-50%, -100%); opacity: 1; }
  46% { transform: translate(-50%, -108%); }
  56%, 100% { transform: translate(-50%, -100%); }
}

Clicking the directions button really opens a panel with distance and time via aria-expanded — there's no real map tile, just two CSS roads.

06Podcast player embed widget

Eight waveform bars rise and fall at staggered intervals so it looks like real playback. Use it for an episode card inside a post, or a latest-episode widget in the sidebar.

.wave span { animation: bar #{$duration * 3} ease-out infinite alternate; }
.wave.is-paused span { animation-play-state: paused; }
@keyframes bar {
  from { transform: scaleY(.3); }
  to { transform: scaleY(1); }
}

Clicking play really stops and restarts the wave — one line of animation-play-state ties playback state to the animation itself.

07GitHub repo stats card embed

The star icon wiggles side to side as if inviting a click. It never calls the real GitHub API, so it works as a repo card in an open-source write-up or a code link on a portfolio page.

.icStar { animation: wiggle $duration $easing infinite; transform-origin: 50% 90%; }
@keyframes wiggle {
  0%   { transform: rotate(0) scale(1); }
  20%  { transform: rotate(-16deg) scale(1.15); }
  40%  { transform: rotate(12deg) scale(1.05); }
  60%  { transform: rotate(-10deg) scale(1.15); }
  100% { transform: rotate(0) scale(1); }
}

A real click on Star bumps the count and fills the icon's color.

08Newsletter signup embed widget

The envelope icon floats up and settles down on a loop. Use it as a subscribe card at the bottom of a post, or a newsletter form in the sidebar.

.icon { animation: float $duration $easing infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .icon { animation: none; }
}

A real regex check on submit swaps the icon to a paper plane and shows a completion message.

09Live chat bubble embed launcher

A white ring around the launcher spreads like radar while the badge number breathes bigger and smaller. Use it as a fixed contact button in the corner of a site, or a live-support entry point on a checkout page.

.ring { animation: ping $duration $easing infinite; }
.badge { animation: bounce $duration $ease-pop infinite; }
@keyframes ping {
  0% { opacity: .5; transform: scale(.85); }
  70%, 100% { opacity: 0; transform: scale(1.25); }
}

A real click opens the chat panel, and .focus({ preventScroll: true }) moves focus to the input without ever forcing the page to scroll.

Where it breaks — cards overflowing at 320px

The X post card (03) and the testimonial card (04) first shipped at a 280px width with generous padding. Rendering at the 320px phone width from 블로그설정.json, document.body.scrollHeight came in 14px and 2px over the 200px budget — checking only document.documentElement misses that overflow entirely, since the stage CSS sets overflow: hidden and never shows a scrollbar. Shrinking the card to 256px and dropping the padding and gaps one spacing token at a time ($sp-4 to $sp-3, $sp-3 to $sp-2) landed exactly at 200px. The map card (05) needed a bigger cut — its map area went from 120px tall to 88px. Border radius is locked to $r-* tokens only, and every gap/padding/margin px value has to be a multiple of 4, so the 1–2px nudge on the play icon had to become transform: translateX() instead of margin-left. The password for all nine zips is xc2tmqdq — lowercase letters and one digit, so it pastes in exactly as shown, no shift key needed.

Accessibility

All nine drop their looping animation under prefers-reduced-motion: reduce and settle on a still shape — the play ring (02) and the chat-bubble ring (09) both lock to opacity: 0 so no ring is left floating mid-loop. Every button carries aria-label, aria-pressed, or aria-expanded so a screen reader can tell whether a like was pressed or a panel opened, and the chat bubble's input focus always passes { preventScroll: true } so the page never jumps. See MDN's prefers-reduced-motion reference for where a visitor turns this system setting on.

FAQ

Do these cards actually load real YouTube, X, or Maps content?

No. All nine are CSS-and-vanilla-JS mockups that never call a real API or iframe. The video card (02) only fills a progress bar when clicked, and the X card's (03) like and repost counts only ever move inside that one card. If you need the real embed, drop the service's official embed code into the same spot and use this CSS as the placeholder before it loads. More embed patterns are searchable on the site search page.

Can I restyle these for my own brand?

Yes. For most demos, changing just the three variables at the top of the SCSS — $duration, $easing, $color — shifts every animated color at once. Text like the company name, address, or quote lives right in the index.html string and can be edited directly; the React version takes the same values as props such as title, address, or quote.

How do I check for 320px overflow myself?

Open dev tools, narrow the viewport to 320px, and compare document.documentElement.scrollWidth and document.body.scrollWidth against window.innerWidth in the console. Checking documentElement alone hides the kind of overflow this post's trap section ran into behind overflow: hidden. See the about page for how this site builds and verifies every demo.