Share buttons
Styling share buttons with CSS
Quick answer
To restyle share buttons, add CSS in the Customizer's Additional CSS or your child theme that targets the plugin's container class, override colours and spacing, and keep visible focus styles. Use one icon style for every network, check contrast in light and dark modes, and avoid editing the plugin's own files, which updates overwrite.
On this page
Where your CSS should live
Never edit a plugin's stylesheet directly; the next update replaces it. Put overrides in Appearance, Customize, Additional CSS, in a block theme's global styles, or in your child theme's stylesheet. The old documentation for share plugins, including the pages on styling buttons and changing button text and background colours that still attract links here, gave the same advice.
Find the right selectors
Inspect the buttons
Right-click a button, choose Inspect, and note the container class the plugin wraps the row in.
Scope your rules
Prefix every rule with that container class so you do not restyle other links on the page.
Override, do not fight
If the plugin uses inline styles or very specific selectors, match its specificity rather than reaching for
!importanteverywhere.Check each state
Default, hover, focus and active. Focus must remain visible.
.share-row a {
display: inline-flex; align-items: center; gap: .4rem;
min-height: 44px; padding: 0 .9rem;
background: #1c1d1f; color: #ffffff;
border-radius: 2px; text-decoration: none;
}
.share-row a:hover { background: #3a3d42; }
.share-row a:focus-visible { outline: 3px solid #1c1d1f; outline-offset: 2px; }Brand colours or your colours?
Network brand colours make a row of buttons loud and inconsistent with your theme. Monochrome buttons in your theme's own colours look calmer and still work, because readers recognise the logos. If you do use brand colours, check contrast: white text on some brand yellows and light blues fails accessibility guidelines.
| Choice | Upside | Watch for |
|---|---|---|
| Monochrome in theme colours | Calm, consistent | Logos must stay recognisable |
| Network brand colours | Instantly recognisable | Contrast and visual noise |
| Outline buttons | Light, modern | Thin borders can vanish in dark mode |
Changing button text
Short verbs work: "Share", "Post", "Copy link". If your plugin does not expose the label in settings, change it with a translation override rather than CSS content tricks, so screen readers announce the real text.
Dark mode
If your theme has a dark mode, test the buttons in it. Icons drawn in black disappear on dark backgrounds unless they use currentColor, which inherits the text colour.
Questions
Where do I add custom CSS for share buttons?
In the Customizer's Additional CSS, a block theme's global styles, or your child theme stylesheet. Never in the plugin's files.
Why does my CSS not change the share buttons?
The plugin's selectors are more specific or it uses inline styles. Scope your rule to the plugin's container class and match its specificity.
Should share buttons use network colours?
It is optional. Monochrome buttons in your own colours are calmer; if you use brand colours, check the text contrast.
Hannah Voss, Editor. Checks every guide against a working WordPress install and the networks' current documentation. Last reviewed September 2026.
Related guides
- Share buttons on mobile: layout, size and native sharingMake share buttons work on phones: tap target sizes, one-line rows, bottom bars, the native share sheet, and how to show different buttons on small screens.3 min read
- How to add social share buttons to WordPressAdd social share buttons to WordPress with a plugin, a block, or plain links in your theme. Placement, networks, counts and the checks to run afterwards.4 min read
- Share buttons and page speedWhy some share buttons slow WordPress pages and others cost almost nothing. How to measure the impact, and what to change to keep sharing fast on every page.3 min read