Text only CTAs that look and format like normal text

SOLVE
elisabet
Participant

I am having an issue trying to figure out how to create a text only (Link (No Style)) CTA that looks exactly like a regular hyperlink in an email. Everything that I create looks obviously out of place and won’t wrap like normal text. The entire phrase will go to its own line if it doesn’t fit in the allowed space in my email.

 

I am new to CSS but I can’t find any resources online to help with this.

 

Any tips?

1 Accepted solution

Accepted Solutions
nicolebrenner
Solution
HubSpot Employee

Hi @elisabet, creating a CTA with that type of formatting would be pretty complicated, would you mind sharing why you'd prefer to use a CTA as opposed to a Hyperlink or Tracking URL? 

View solution in original post

0 Upvotes
7 Replies 7
nicolebrenner
Solution
HubSpot Employee

Hi @elisabet, creating a CTA with that type of formatting would be pretty complicated, would you mind sharing why you'd prefer to use a CTA as opposed to a Hyperlink or Tracking URL? 

View solution in original post

0 Upvotes
elisabet
Participant

Hi Nicole,

 

I suppose it was ingrained in me that anything linking to a webinar, event or piece of content should have a CTA. If that is not the case I am happy to stick with tracking URLs.

 

Thanks for letting me know that it isn't the norm.

 

Elisabet

MiaPV
Top Contributor

Nicole, I'm having the same issue and understand your answer, but what is the point of having the link (no style) cta option if it isn't supposed to mimic the format of a traditional weblink?

 

I've had luck in the past with creating the link CTAs and having them appear like traditional links, but today they are suddenly showing up totally wonky and I can't figure out why the formatting would be so far off

Screen Shot 2017-09-11 at 9.02.27 AM.png

There is nothing in the html that gives me a clue. The only thing I can think of is if CTAs are automatically given the same CSS styling as images, but I would think they would be treated separately. Any help is appreciated.

Thanks,

Mia

RogerM
Participant

Thanks @nicolebrenner for the response, but I do have a reason why I want a text only CTA that can be formatted by CSS.

 

I have tried the NO STYLE button, but the display gets blocked by email clients.  So, I get emails in which the CTA can only be seen once the user agrees to download images -- which adds a layer of complexity.

 

What I really want is an email in which I can insert a link to a PDF for download or a landing page that can be tracked in a format like . <a href="COMPLICATED TRACKABLE CTA LINK">Name of Report<\a>.

 

Thank you.

DelRoss
Participant

Would this work:

 

Create CTA using CTA builder.

 

Copy URL in "Test Link" button.

 

Paste this text as target URL in normal text HTML link within email.

 

I think we would lose the CTA impression data but would be able to see link click data in the campaign summary reports.  

 

Am I right?

0 Upvotes
onvista
Contributor

The problem is that those created via Button Style = Link (No Style) aren't real hyperlinks. HubSpot converts them to images and inject an <img> tag into your (external) website. E-Mail clients tend to block images by default and thus the link is not showing.

I really don't know why they can't just be shown as true HTML hyperlinks.

DevDey
Participant

Hi @elisabet,

There is a way around to the issue. 

 

In the email body, insert a single row and column table. Apply cell background and border colour of your choice. Click and select the table and then click on the insert hyperlink button Screen Shot 2020-09-16 at 9.08.04 am.png

 

Add the a Link text of your choice (download, click here etc.), choose how you want to 'Link to' and the 'Link'. And that's your text based CTA.

 

This might not be the most awesome way of going about it, but it saves from users having to click to download the CTA image file (especially in Outlook). Here is the screenshot of how email will look and the source code of the same

 

CTA buttonCTA button

Table as CTA button

 

 

Screen Shot 2020-09-16 at 9.19.41 am.png

Source Code for table CTA (highlighted) 

 

Hope this helps!

 

Cheers,

Dev

 

Quick Addendum: In the edit mode of your email, please toggle between desktop, tablet and mobile screen resolutions to check how the table as CTA button is displayed. Based on the text length of your table content you will have to either increase or decrease the width of the table. 

 

Edit dimension to ensure text fits the table and is responsive across device type- desktop, tablet and mobileEdit dimension to ensure text fits the table and is responsive across device type- desktop, tablet and mobile