Adding CTA buttons in Marketo Landing Page

[Deeps]

Hi Team,

Need assistance with adding CTA button in Marketo Landing page.

Thanks,

Deepthi.

[Darshil_Shah1]

This seems like an overly broad question. Are you looking for any specific kind of button/button functionality that users here could help with? I bet there would be plenty of threads/documentation around creating a normal button on a Marketo LP.

[Deeps]

A Normal CTA button which is hyperlinked, clicking on button will direct to a webpage.

[SanfordWhiteman]

"Normal" is still quite vague, as there are many different ways to create a clickable button on a webpage. (Unlike in an email, where the HTML markup options are limited.)

The <a> and <button> tags are common (and ancient!) parts of HTML, and you most likely are referring to one of those. Darshil and I are both wondering what your specific challenges are and what you've tried so far.

[Katja_Keesom]

Let's start at the beginning: Do you have a guided template in place for your landing pages, or are you creating a page from scratch?

[Dave_Roberts · Accepted solution]

Basic Button Code:

Here's a snippet of HTML that'll create a basic centered black button with white text inside any Rich Text Element on a Guided LP:

<div style="text-align: center;">
    <a href="#" target="_blank" style="padding: 8px 20px; background-color: #000; color: #fff; text-decoration: none; display: inline-block;">Button Text</a>
</div>

You can apply this code by clicking into any Rich Text (Editable) area on your Landing Page from within the Landing Page Editor. When you double-click an editable Rich Text area, it'll pop up the Rich Text Editor panel. 
From there, you click the HTML icon in the tool bar which brings up another pop-up with the code view for that section.

Paste the code snippet above wherever you'd like to place the button. Click the SAVE/APPROVE button to get back to the Rich Text Editor dialog popup and then click the SAVE/APPROVE button once again to apply this to your page. 

Here's a look at what to expect (just the button, the dotted lines are for context only):

To make changes:
To left/right/center align the button, change the "text-align" on the <div> from "center" to: "left", "right" or "center".

To change the background color of the button, update the #000 hexcode set on the "background-color" style.
To change the text color of the button, update the #FFF hexcode set on the "color" style.

To update the padding (top and bottom) change the padding value of 8px to your desired value.
To update the padding (left and right) change the padding value of 20px to your desired value.

Things to think about:
This is a REALLY simple button setup, it does not include things like hover, focus and active states.
Normally this kind of thing is handled in combination with CSS -- you'd build a class for your buttons (rather than styling them inline on the element) and then build out the hover, focus and active states in the CSS as well. Here's a link to a w3schools article which explains and demonstrates a CSS button setup for reference: https://www.w3schools.com/css/css3_buttons.asp 

[Deeps]

Thanks Dave, really helpful.

[Dave_Roberts]

@Deeps would you mind helping me out by marking the solution I provided as correct in this post if you found it to be helpful? This helps me in here in the Community to build up my profile. Let me know if there's anything else I could help with on this one if not.