GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 Social Share Button Design Embed Widgets

· Godrich · 9 items · 14 min read

EmbedsSCSSVanilla JSClickAutoplayLanding pageMedia & press

Social share button design is a small standalone card for one job — share, reviews, contact.

Social share button row01 embed-social-share-bar Video embed play-button overlay02 embed-video-play-overlay X post embed card mock03 embed-x-post-mock Testimonial review embed widget04 embed-testimonial-card Map location embed card05 embed-map-location Podcast player embed widget06 embed-podcast-player GitHub repo stats card embed07 embed-github-repo-card Newsletter signup embed widget08 embed-newsletter-signup Live chat bubble embed launcher09 embed-live-chat-bubble

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

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 button (09) stays on screen the whole time. They are all pieces that ride on someone else's page, but building the playback controls yourself is Custom Video Player CSS Controls, and checking that no widget string goes missing per language is i18n JSON Checks.

01Social share button row

What you see in this share button ui design

Four pastel circular buttons — pink, mint, lilac, sky — pop up one after another with a quick scale bounce.

Social share button row
Open in a new tab

01 · Social share button row — Measured area 4.878% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

scale bounce staggernavigator.clipboardaria-pressed

Where to look in the code

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

What happens on screen

A white ring around the play button on a dark thumbnail expands and fades like a radar ping.

Video embed play-button overlay
Open in a new tab

02 · Video embed play-button overlay — Measured area 2.308% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

ring ping looprequestAnimationFrame progressaria-label toggle

How to read the code

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

What moves

The heart icon breathes — scale and opacity rising and falling — to hint that it's clickable.

X post embed card mock
Open in a new tab

03 · X post embed card mock — Measured area 0.315% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

opacity+scale breathearia-pressed toggleCSS-only mock, no real API

What to change

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

What you see

Five stars pop in one by one, left to right, with a bounce.

Testimonial review embed widget
Open in a new tab

04 · Testimonial review embed widget — Measured area 0.689% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

staggered scale poparia-pressed counterquote + star icon

Where to look in the code

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

What happens on screen

The map pin drops in from above with a small bounce before settling.

Map location embed card
Open in a new tab

05 · Map location embed card — Measured area 0.37% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

mcard-drop 바운스aria-expanded panelCSS-only abstract map

How to read the code

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

What moves

Eight waveform bars rise and fall at staggered intervals so it looks like real playback.

Podcast player embed widget
Open in a new tab

06 · Podcast player embed widget — Measured area 0.083% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaleY bar loopanimation-play-state toggletext-overflow ellipsis title

What to change

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

What you see

The star icon wiggles side to side as if inviting a click.

GitHub repo stats card embed
Open in a new tab

07 · GitHub repo stats card embed — Measured area 0.198% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotate wiggle looparia-pressed star togglelanguage dot

Where to look in the code

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

What happens on screen

The envelope icon floats up and settles down on a loop.

Newsletter signup embed widget
Open in a new tab

08 · Newsletter signup embed widget — Measured area 0.66% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateY float loopregex email validationicon swap on success

How to read the code

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

What moves

A white ring around the launcher spreads like radar while the badge number breathes bigger and smaller.

Live chat bubble embed launcher
Open in a new tab

09 · Live chat bubble embed launcher — Measured area 2.226% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

ring ping + badge pulsefocus({preventScroll:true})aria-expanded toggle

What to change

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. When an embed card has to draw numbers, the coordinate math from CSS Chart Design drops straight in. 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, or the social share buttons html here, 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. The strip these widgets usually end up living in is taken apart in Website Footer Design.

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.

Enter the archive password

The password is inside this article. You will find it as you read.