Styling Guide

Styling using CSS variables

Here are a list of the CSS variables you can use to change main styles:

/** Single share button component */
:root {
  --sb-icon-size: 1.2em;
  --sb-font-weight: bold;
  --sb-text-padding: 0 0.7em;
}

/** Share buttons component */
:root {
  --sb-icon-size: 1.2em;
  --sb-font-weight: bold;
  --sb-text-padding: 0 0.7em;
  --sb-margin: 0.3125em;
  --sb-padding: 0;
  --sb-min-width: 4.125em;
  --sb-height: 2.5em;
  --sb-color: initial;
  --sb-background: initial;
  --sb-font-size: 13px;
  --sb-border: initial;
  --sb-border-radius: initial;
  --sb-line-height: 2.571em;
  --sb-text-shadow: initial;
  --sb-overflow: initial;
}

If you still need to change other CSS rules, see the classes in the next section.

Create custom theme

There are several classes that help you to create your custom styles

.sb-moon-theme {
  // share button wrapper
  .sb-wrapper {
    // Content wrapper
    .sb-content {
      // Icon wrapper
      .sb-icon {
      }
      // Text wrapper
      .sb-text {
      }
    }

    // For conditional styles
    // E.g. Apply when icon, text are shown
    &.sb-show-icon.sb-show-text {
       // Icon wrapper
      .sb-icon {
      }
      // Text wrapper
      .sb-text {
      }
    }
  }
}

If you use .sb-moon-theme then the theme name will become moon:

<share-buttons theme="moon"></share-buttons>