Use code NOVASHARE for an extra 10% off!
  1. Home
  2. Docs
  3. General
  4. How to customize the button appearance (style, layout, shape, color)

How to customize the button appearance (style, layout, shape, color)

Novashare lets you easily customize the size, shape, and colors of your social sharing buttons.

Button style

There are six different styles you can use with the Inline Content share buttons and two different styles with the Floating Bar share buttons. You can also toggle labels on or off.

Solid (inline, floating)

Solid share buttons
Solid share buttons

Inverse (inline, floating)

Inverse share buttons
Inverse share buttons

Bordered Label (inline)

Bordered label share buttons
Bordered label share buttons

Bordered Button (inline)

Bordered share buttons
Bordered share buttons

Minimal Label (inline)

Minimal label share buttons
Minimal label share buttons

Minimal (inline)

Minimal share buttons
Minimal share buttons

Check out more button style combinations.

Follow the steps below to customize the style of your social sharing buttons in Novashare.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can customize the style of both your Inline Content share buttons and Floating Bar share buttons. Click on the tab for the one you want to change. In the example below, we are changing the style of the “Inline Content” share buttons.

Inline Content share buttons
Inline Content share buttons

Step 3

Scroll down and under “Button Style” select the style you want: Solid, Inverse, Bordered Label, Bordered Button, Minimal Label, or Minimal. Note: The default is solid.

Novashare button style
Novashare button style

Step 4

Scroll down and click “Save Changes.”

Button layout

There are seven different button layouts you can choose:

  • Auto Width
  • 1 Column
  • 2 Column
  • 3 Column
  • 4 Column
  • 5 Column
  • 6 Column

Here is an example of share buttons with a 4 column layout. Columns will span the width of your content container.

Share buttons with 4 columns
Share buttons with 4 columns

Follow the steps below to customize the button layout of your social sharing buttons in Novashare.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can customize the layout of your Inline Content share buttons. Click on the “Inline Content” tab.

Inline Content share buttons
Inline Content share buttons

Step 3

Scroll down and under “Button Layout” select the layout you want: Auto Width, 1 Column, 2 Columns, 3 Columns, 4 Columns, 5 Columns, or 6 Columns. Note: The default is auto width.

Novashare button layout
Novashare button layout

Step 4

Scroll down and click “Save Changes.”

Button size

Follow the steps below to customize the size of your social sharing buttons in Novashare.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can customize the size of both your Inline Content share buttons and Floating Bar share buttons. Click on the tab for the one you want to change. In the example below, we are changing the size of the “Inline Content” share buttons.

Inline Content share buttons
Inline Content share buttons

Step 3

Scroll down and under “Button Size” select the size you want: Small, Medium, or Large. Note: The default is medium.

Novashare button size
Novashare button size

Step 4

Scroll down and click “Save Changes.”

Button shape

Follow the steps below to customize the shape of your social sharing buttons in Novashare.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can customize the shape of both your Inline Content share buttons and Floating Bar share buttons. Click on the tab for the one you want to change. In the example below, we are changing the shape of the “Inline Content” share buttons.

Inline Content share buttons
Inline Content share buttons

Step 3

Scroll down and under “Button Shape” select the shape you want: Squared, Rounded, or Circular. Note: The default is squared.

Novashare button shape
Novashare button shape

Step 4

Scroll down and click “Save Changes.”

Button color

Follow the steps below to customize the color of your social sharing buttons in Novashare.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can customize the colors of both your Inline Content share buttons and Floating Bar share buttons. Click on the tab for the one you want to change. In the example below, we are changing the color of the “Inline Content” share buttons.

Inline Content share buttons
Inline Content share buttons

Step 3

Scroll down and under “Button Color” select the color you want. There is a color picker, so you can literally choose any color. You can also paste in any hex value. Note: The default is the social networks’ brand colors.

Novashare button color
Novashare button color

Step 4

Scroll down and click “Save Changes.”

Button hover color

Follow the steps below to customize the hover color of your social sharing buttons in Novashare.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can customize the hover color of both your Inline Content share buttons and Floating Bar share buttons. Click on the tab for the one you want to change. In the example below, we are changing the hover color of the “Inline Content” share buttons.

Step 3

Scroll down and under “Button Hover Color” select the color you want. There is a color picker, so you can literally choose any color. You can also paste in any hex value. Note: The default is simply a slightly darker shade of whatever you chose for the primary color. This way you can see a hover occurring.

Novashare button hover color
Novashare button hover color

Step 4

Scroll down and click “Save Changes.”

Button margin

Like your share buttons a little closer together or further spaced out? You can change the margins to be whatever you prefer. Here is an example with a 0px margin set.

Share buttons with no spacing
Share buttons with no spacing

Follow the steps below to change the margin around your social share buttons.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can change the button margin on both your Inline Content share buttons and Floating Bar share buttons. Click on the tab for the one you want to change. In the example below, we are removing the spacing on the “Inline Content” share buttons.

Inline Content share buttons
Inline Content share buttons

Step 3

Scroll down and under “Button Margin”, input the button margin you want in pixels (px). Note: The default is 10px. If you want to completely remove all spacing, input 0px.

Button margin
Button margin

Step 4

Scroll down and click “Save Changes.”

Container offset

Follow the steps below to change the offset that your floating social share button container will be from the edge of the screen.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can customize the container offset of your Floating Bar share buttons. Click the “Floating Bar” tab.

Step 3

Scroll down and under “Container Offset” input the offset in pixels (px) that your floating social share button container will be from the edge of the screen. Note: The default is 5px.

Novashare container offset
Novashare container offset

Step 4

Scroll down and click “Save Changes.”

Was this article helpful?

Related Articles