Styling - Nuxt Social Share

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

Outlined Buttons

<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
    />
  </div>
</template>

<style>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.social-share-button {
  color: var(--color-brand);
  border: 2px solid var(--color-brand);
  padding: 0.5rem 0.75rem;
}

.social-share-button:hover {
  background-color: var(--color-brand);
  color: white;
}
</style>

Square Buttons, icons only

<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
      :styled="true"
      :label="false"
    />
  </div>
</template>

<style>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
}

.social-share-button {
  color: #fff;
  padding: 1rem;
  aspect-ratio: 1;
  border-radius: 0;
}
</style>

Icons only, colorize on hover

<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
      :label="false"
    />
  </div>
</template>

<style>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
}

.social-share-button {
  color: #63738a;
  padding: 1rem 2rem;
}

.social-share-button:hover {
  color: var(--color-brand);
  padding: 0.5rem 1rem;
}
</style>

Using multiple buttons

How to easily create a consistent and reusable multi-button component.