Buttons

Loyde recognizes four button types styles:

  1. Primary Button
  2. Secondary Button
  3. Ghost Button
  4. Text Link Button

Primary Button

This button is colored with the primary color. On hover the background color becomes slightly darker. Theme applies "primary button" styles to all button-like HTML elements (HTML tags "button" and "input type=button").

Secondary Button

This button is colored with the secondary color. On hover the background color becomes slightly darker.

Ghost Button

This button has transparent background, and a primary color border. On hover the background gets filled with primary color.

Text Link (i.e. "text link button")

This button is colored with the primary color. On hove the background becomes slightly darker.

How to customize buttons

Theme Options Buttons

Buttons can be customized:

  • Globally, through Theme Options (options panel)
  • Individually, in editor, when buttons are added through the custom WPBakery element, Button. For example: choose the icon, align the icon left/right/above, ...

Global button settings (Theme Options)

Choose typography for the buttons

It's possible to choose font settings which affect all button styles at once.

To choose font for the buttons:

  1. Go to WP admin -> Loyde -> Theme Options -> Buttons
  2. Under Font for Buttons, choose desired font settings.

The typography field includes:

  • font family
  • font weight & style
  • font size
  • line height
  • letter spacing
  • etc.

Choosing custom styling for the buttons

It's possible to customize each button type separately. Furthermore, each button type offers three groupes of settings:

  • General settings;
  • Text settings: affect the textual part of the button (it's the text on the button, without the icon);
  • Icon settings: affect the button icon, if the icon has been selected. If the icon isn't selected these settings don't have any effect.

The only exception is Text Link button, due to its specific appearance.

Primary button

Theme Options Primary Button

General settings:

  • Text color (regular and hover color)
  • Background color (regular and hover)
  • Line height

Text settings:

  • Padding
  • Border (regular and hover)
  • Border Radius

Icon settings:

  • Padding
  • Border (regular and hover)
  • Border Radius

Secondary button

Theme Options Secondary Button

The same settings as for the Primary button.

Ghost button

Theme Options Ghost Button

The same settings as for the Primary button.

Text Link button

Theme Options Text Link

This button type offers a reduced number of settings compared to other button types. The reason s a specific visual representaton of this button, which is visually similar to a regular link.

Settings:

  • Text Color (regular and hover)
  • Text Padding
  • Icon Padding
  • Line Height