Styling share buttons with CSS

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

1. 01

   Inspect the buttons

   Right-click a button, choose Inspect, and note the container class the plugin wraps the row in.

2. 02

   Scope your rules

   Prefix every rule with that container class so you do not restyle other links on the page.

3. 03

   Override, do not fight

   If the plugin uses inline styles or very specific selectors, match its specificity rather than reaching for !important everywhere.

4. 04

   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.

Worked example: style share buttons CSS for a dark theme

Take a theme with a near-black background (#121417) and off-white text (#e8e6e1), where the plugin's default row shows six brand-coloured blocks. The site wants outline buttons in the theme's own colours, one icon style, and labels on desktop only. The plugin wraps the row in .plugin-share and each link carries a network class, so the override scopes to that container and touches nothing else on the page.

.plugin-share a {
  background: transparent; color: #e8e6e1;
  border: 1px solid #6f747c; border-radius: 2px;
  min-height: 44px; padding: 0 .8rem; gap: .4rem;
}
.plugin-share a:hover { border-color: #e8e6e1; }
.plugin-share a:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.plugin-share svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 600px) { .plugin-share .label { display: none; } .plugin-share a { padding: 0; width: 44px; justify-content: center; } }

The contrast figures are the part to check with a tool rather than by eye. Off-white on the near-black background gives a ratio of about 14.8 to 1. The border grey against the background gives about 3.9 to 1, which clears the 3 to 1 minimum for a non-text boundary. The focus outline in a warm yellow gives about 11 to 1 against the background, so keyboard users can find it. Those three numbers, text, border and focus, are the ones that decide whether a restyled row is usable.

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.

What goes wrong

• The rule never applies. The plugin's selector is .plugin-share ul li a and yours is .plugin-share a. The longer selector wins. Match or exceed it.
• Inline styles win. Some plugins print colours as style attributes. Look for a setting that turns off the plugin's colours before resorting to !important.
• Focus removed. outline: none to tidy a hover state also removes the keyboard indicator. Style :focus-visible instead of deleting the outline.
• Icons vanish in dark mode. Icon fonts and SVGs with hard-coded black fills disappear. Use fill: currentColor.
• Cached stylesheet. The CSS is saved but the page shows the old row. Purge the page cache and any minification plugin's combined file.
• Restyled the wrong row. An unscoped a rule restyles comment links and the footer. Scope every rule to the container.

Check it worked

• Every button shows the new style logged out, with caching on, on desktop and on a phone.
• Text contrast is at least 4.5 to 1 and the focus indicator is visible on Tab in both light and dark mode.
• Icons are one style and one size across the whole row.
• The row fits one line at 360 pixels wide; labels hide or the row scrolls.
• No other links on the page changed. Check comment links, the footer and the navigation.

Sizing for touch is covered in mobile share buttons, and if the row is being built from scratch rather than restyled, start with adding share buttons. Weight and loading questions belong to share button page speed; the share buttons hub lists every guide.

Sources

• MDN Web Docs: Flexible box layout
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2

Questions

Related reading

1. 01Share 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.6 min read
2. 02How 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.6 min read
3. 03Share 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.5 min read