Changing button color dynamically

[Sreeja06]

Hey all, is there any way to change color of the CTA button dynamically in landing pages.

[SanfordWhiteman]

Of course! A Marketo LP is just an HTML + CSS + JS page.

If you structure your HTML so that a CSS class determines the button color, you can switch the CSS class using JS, or output it using a {{my.token}} or ${variable}, or... so many things.

But your description is pretty vague. “Dynamically” according to what factors?

[Sreeja06]

I want color of this button to change dynamically according to the segmentations defined.

[SanfordWhiteman]

Put different variations of a <style> tag in a segmented Rich Text area.

[Darshil_Shah1 · Accepted solution]

If it's Marketo LP - and you wanna leverage cookied record's data/Marketo's inferred data e.g., location for customizing the button color you can define various possible buttons styles within the dynamic snippet for each segment, which will help you get away from the custom JS. 🙂 

Just as an FYI: Dynamic snippets are tied to a database segmentation and will show different content to visitors based on which segment they belong to.

[Sreeja06]

Sorry, but I'am new to Marketo can you please tell how to use segments for color variables

[SanfordWhiteman]

I mean you create a mktoText block and then make it dynamic.

One segment might have

<style>
  .some-button {
     background-color: orange;
  }
</style>

and another has

<style>
  .some-button {
     background-color: green;
  }
</style>

But it seems like you need to familiarize yourself with Marketo features by reading the docs and experimentation. You need to be fluent in the different options (Darshil mentions using a Snippet, which is another way) to make the best choice for each project.