Custom Styling

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

<style scoped>
.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>

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

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

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

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

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

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

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