---
title: "Styling with CSS"
description: "How to apply custom styles to the <SocialShare> component with CSS."
canonical_url: "https://nuxt-social-share.stefanobartoletti.it/usage/styling-with-css"
last_updated: "2026-07-29T16:43:23.455Z"
---

## Component default styles

The base for visual customization of the `<SocialShare>` buttons are the builtin CSS classes:

- `.social-share-button`
- `.social-share-button--{network name}`
- `.social-share-button--styled` (only if `styled` is set to `true`)
- `.social-share-button__icon`
- `.social-share-button__label`

and the CSS brand color variable, applied to the `<a>` element, and available to all its children:

- `--color-brand`

## CSS Specificity

The component CSS styles are placed inside a `@layer components` CSS layer.

Using a layer ensures a lower specificity over regular unlayered CSS, allowing for easy overwriting with your own customizations.

<note>

You can refer to MDN documentation on [CSS `@layer` rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for more info about this feature

</note>