On this page, edit the settings for the global and primary buttons across your entire website.

Remember to click the Save button to commit your changes. Click the Reset button to return to the default settings.

Global Button

This is the universal styling for all of your <button class=“btn”> tags.

Global Button Font

  • Font Family — Enter/choose the font family for this button.

  • Classification — Choose whether you want serifs on the fonts or not (san serif).

Global Button Styling

Click the small + button to expand this section.

There are five button sizes that are available: XS, SM, MD, LG, and XLG. If you prefer, modify the settings for each of thew button sizes that you intend to use.

  • Choose a Button Style.

  • Use the - and + buttons to adjust the Kerning, Font Size, Font Weight, Button Height, Horizontal Padding, Border Radius, and Icon Sizing.

  • Also, choose the Style and type of Shadow.

Primary Button

This is the styling for your <button class=“btn-primary”> tags.

Primary Button Background

Background type: Select the drop-down and choose a light, dark, or other type of background.

Background color: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field.

Primary Button Border

  • Border Width: Use the - and + buttons to adjust the width of the button border.

  • Border Color: Select the drop-down and then use the color picker to choose a specific color for border. You can also enter the hex color code into this field.

  • Border Placement: Choose the placement of the border.

Primary Button Text Style

  • Text Color: Select the drop-down and then use the color picker to choose a specific text color. You can also enter the hex color code into the Text Color field.

  • Text Shadow: Select the drop-down to choose what type of text shadow to apply to the button text.

  • Drop Shadow: Select the drop-down to choose what type of drop shadow to apply to the button text.

Primary Button “Hover” State

This is the styling for your <button class=“btn-primary”> tag when its button is in a hover state.

Button Hover Background

Background type: Select the drop-down and choose a light, dark, or other type of background.

Background color: Select the drop-down and then use the color picker to choose a specific color for the background. You can also enter the hex color code into this field.

Button Hover Border

  • Border Width: Use the - and + buttons to adjust the width of the button border.

  • Border Color: Select the drop-down and then use the color picker to choose a specific color for the border. You can also enter the hex color code into this field.

  • Border Placement: Choose the placement of the button border.

Button Hover Text Style

  • Text Color: Select the drop-down and then use the color picker to choose a specific text color. You can also enter the hex color code into the Text Color field.

  • Text Shadow: Select the drop-down to choose what type of text shadow to apply to the button text.

  • Drop Shadow: Select the drop-down to choose what type of drop shadow to apply to the button text.

Primary Button “Focus” State

This is the styling for any <button class=“btn-primary”> tag when its button is in a focus state. This is what the button will look like once it’s clicked and becomes the “active” item on the page.

Button Focus Background

Background type: Select the drop-down and choose a light, dark, or other type of background.

Background color: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field.

Button Focus Border

  • Border Width: Use the - and + buttons to adjust the width of the button border.

  • Border Color: Select the drop-down and then use the color picker to choose a specific border color. You can also enter the hex color code into the Background Color field.

  • Border Placement: Choose the placement of the button border.

Button Focus Text Style

  • Text Color: Select the drop-down and then use the color picker to choose a specific text color. You can also enter the hex color code into the Text Color field.

  • Text Shadow: Select the drop-down to choose what type of text shadow to apply to the button text.

  • Drop Shadow: Select the drop-down to choose what type of drop shadow to apply to the button text.