Lesson: Setting Button Styles

Configuring button styles ensures that your website's call-to-action buttons are consistent and visually appealing. By setting global button styles, you create a cohesive look for all buttons, enhancing user experience and reinforcing your brand identity.

The button styles set here can be inherited by the Custom Button's presets (more on that later), making it easy to apply these styles site-wide. Additionally, all buttons can be further styled at the page level, allowing you to create even more custom button styles as needed.

Steps to Configure Button Styles:

Primary Button Style

Set the styles for your primary buttons, including font family, color, size, weight, background color, border, and padding. Primary buttons are typically used for the main actions you want users to take.

Secondary Button Style

Configure the styles for your secondary buttons, which can be used for less prominent actions. Ensure they complement the primary button style.

Highlight Button Style

Define the styles for highlight buttons, which are used to draw attention to specific actions or important elements. These buttons should stand out from the primary and secondary buttons.

Note: The button styles you set here will be available within the Custom Button module's "Presets" field, which we will cover in another lesson. This feature allows you to easily apply consistent button styles across your site by inheriting them from these global settings.

By setting these button styles, you ensure a consistent and professional appearance for all call-to-action buttons on your website. In subsequent lessons, we will cover how to configure other global styles, such as forms, section spacing, and global header and footer styles. This comprehensive approach will help you create a unified and visually appealing website.