Social Share (Divi)

Share buttons for 21 networks plus Copy link, Print and the device’s own share sheet. Official brand colours or your own, filled, outline, tinted or plain, three shapes, icon and/or text, inline, stacked or in a grid per device, hover motions and fills — and a floating bar. Every button is a Share Button child with its own network, text, icon and what it shares. Each example is labelled with the settings that make it.

1. The default five, with a lead text

Icon and text · official colours · Filled · Rounded · Lead Text “Share this look” beside the buttons.

2. Four styles

The same five buttons in each style, in their brand colours.

Style: Outline

Style: Plain

3. Shapes, icon only

Icon only (the network name becomes the tooltip and the accessible label) in three shapes.

Icon only · Shape: Circle

4. Hover motions and fills

Hover (or tab to) the buttons. Seven motions on circle icons, then three fills with a glow on outline buttons.

Hover Motion: Pulse

Hover Motion: Icon slides up

Outline · Hover Fill: Radial out · Glow

5. Your own colours

Colours: My colours — a neutral set that turns into the accent on hover; then the same with Brand Colour on Hover; then per-button Own Colours.

Per-button Own Colours

6. Layouts

Stacked — full width; a grid of equal columns (3, then 2 on phones); and Alignment: Stretch, so the row fills the width.

Layout: Grid, 3 columns (2 on phones)

Alignment: Stretch · Tinted · label spacing 10 px

7. Every network

All 24 buttons — 21 networks, Copy link, Print and Share… — icon only, circle, centred. X, Threads and Bluesky use their current marks.

8. On a product page

Pinterest pins the product photo, X adds hashtags and a via handle, Email has its own subject, WhatsApp sends a custom text, and Share… opens the phone’s own sheet (or copies the link on a desktop).

HOODIES

Classic Organic Hoodie

$64.00

Heavyweight organic cotton, brushed inside for warmth. Printed by hand in our studio.

9. On a dark background

My colours on dark — a translucent fill with light text that turns to each brand on hover; a white lead text and a larger size (Button Height 50 px, Icon 20 px, text 16 px bold).

10. Floating share bar

Floating Share Bar: Left edge — the bar on the left of this page, pinned 40% from the top, icons only. On phones a second switcher pins a bottom bar (Bottom bar on phones).

On a desktop the bottom-bar module shows inline, like this. On a phone it is pinned to the bottom of the screen.