Hi there! 👋
In today’s lesson, we’re going to look at how to change your global button colors across the entire website.

✅ Step 1: Log in and Open Any Page

• Start by logging into your website backend.

• Navigate to the Pages section.

• Choose any page (for this example, I’m using the “Team” page because I know it contains multiple buttons).

• Right-click the page and choose Edit with Elementor in a new tab.

🎛️ Step 2: Access Site Settings

• Once Elementor loads, go to the Site Settings in the left sidebar.

• Under Site Settings, click on Buttons.

🎨 Step 3: Customize Button Colors

You’ll see the default button styles here — including their normal state and hover state.

Normal Button Colors:

• The background color (e.g., a creamish-yellowish tone) is set here.

• You can:

  • Pick a new color using the color picker, or

  • Choose from your Global Colors (set in the previous lesson).

• If you choose a darker background, be sure to change the text color to something lighter like white for readability.

Hover Button Colors:

• This controls how the button looks when someone hovers their mouse over it.

• You can:

  • Change the hover background (e.g., to a bright or contrasting color).

  • Adjust the hover text color to keep the button readable.

⚠️ Note on Inconsistent Button Colors

Not all buttons may reflect your global changes.

• For example, some hero sections or CTAs may use custom button colors that override the global settings.

• This is often done to make specific buttons stand out — for instance, buttons on a dark background may have been customized separately.

Don’t worry! I’ll show you how to adjust individual button colors manually in a future lesson under “Editing Buttons on a Page.”

💾 Step 4: Save Your Changes

Once you’re happy with the button styles:

• Click Save in the bottom-left corner of Elementor.

• Your buttons across the website will now reflect the new global colors (where applicable).

🎉 And that’s it!

You’ve now learned how to:

• Access button styling options in Elementor.

• Set both normal and hover colors.

• Understand when and why some buttons might not follow the global settings.

See you in the next lesson! 😊