Customizing the Buttons

The buttons displayed in the web pages of your website can be modified through the Customizer. To display all available customization options, please navigate to Appearance > Customize.

Customizing All Buttons Style

To customize all buttons, go to Appearance > Customize > Buttons > General.

  • Font Family – The font family for the buttons displayed in all web pages.
  • Variant – The font weight and/or style for the buttons displayed in all web pages. The options for this setting may differ from a font family to another.
  • Subset(s) – The subset(s) for the buttons displayed in all web pages. The options for this setting may differ from a font family to another.
  • Font Size – The font size for the buttons displayed in all web pages.
  • Line Height – The height for the buttons displayed in all web pages.
  • Letter Spacing – The spacing between each letter for the words contained in the buttons displayed in all web pages.
  • Text Transform – The case and capitalization for the buttons displayed in all web pages.
  • Border Radius – The border radius for the buttons displayed in all web pages.
  • Border Width – The border width for the buttons displayed in all web pages.
  • Vertical Padding – The vertical padding for the buttons displayed in all web pages.
  • Horizontal Padding – The horizontal padding for the buttons displayed in all web pages.

Customizing the Primary Buttons Style

To customize primary buttons, go to Appearance > Customize > Buttons > Primary.

  • Background Color – The background color for the primary buttons displayed in all web pages.
  • Text Color – The color for the primary buttons displayed in all web pages.
  • Border Color – The color of the borders for the primary buttons displayed in all web pages.
  • Background Color on Hover – The background color during the mouse hover action for the primary buttons displayed in all web pages.
  • Text Color on Hover – The color during the mouse hover action for the primary buttons displayed in all web pages.
  • Border Color on Hover – The color of the borders during the mouse hover action for the primary buttons displayed in all web pages.

Customizing the Secondary Buttons Style

To customize secondary buttons, go to Appearance > Customize > Buttons > Secondary.

  • Background Color – The background color for the secondary buttons displayed in all web pages.
  • Text Color – The color for the secondary buttons displayed in all web pages.
  • Border Color – The color of the borders for the secondary buttons displayed in all web pages.
  • Background Color on Hover – The background color during the mouse hover action for the secondary buttons displayed in all web pages.
  • Text Color on Hover – The color during the mouse hover action for the secondary buttons displayed in all web pages.
  • Border Color on Hover – The color of the borders during the mouse hover action for the secondary buttons displayed in all web pages.