Can we make whole button clickable in Email Templates?

[Jasbir_Kaur]

Hi Everyone,

I am facing an issue while creating whole button clickable for outlook especially, I have a button with left text and an arrow image on the right side. Below is the button design - 

Does anyone have any suggestions for this?

Thanks!

Jasbir

[Darshil_Shah1]

We faced this issue in the past and ended up replacing the button with a link (<a> tag) surrounded by the colored padding so as to give the look and feel of a button.

[Jasbir_Kaur]

Hi @Darshil_Shah1,

We have tried that too, as this cta have an image to the right end and text at the left end, so by following this approach the layout is getting distorted in outlook.

In other clients it is working fine, however, for outlook clients it changes the layout like this - https://prnt.sc/rUFL_msNSqGg

Thanks!

Jasbir 

[Jo_Pitts1]

@Jasbir_Kaur ,

Without seeing your code it's hard to know where you are up to.  As a starter, try this https://buttons.cm/

from memory, it still needs some tweaking, but it should get you close.

[Jasbir_Kaur]

Thanks for sharing this @Jo_Pitts1., I'll try this.

[Jasbir_Kaur]

We tried making a CTA using a button generator (https://buttons.cm/), however, not able to achieve the exact layout.

Text and Image: Our design needs text on the left and an arrow on the right. When text grows, the arrow should stay put. See https://prnt.sc/jclaGvl8MpT7.

To make the whole CTA clickable, we applied a complex solution. Splitting CTA into sections, each with its <a> tag and the same code, keeps it intact. Screenshot: https://prnt.sc/1XOI6n292QpI.

If anyone has any other solution, please let me know.

[Darshil_Shah1]

It's likely that with just the button tag, you'll face responsiveness issues in at least some of the clients (mostly with the Outlook desktop client). Question: Have you checked that the other elements shift/expand so as to have consistent and uniform rendering when the link text is long enough to not accommodate within the designated space?

[Jasbir_Kaur]

Hi @Darshil_Shah1,

We are not facing any issue in responsiveness, and we will create the width variable for the long text within the CTA.

[SanfordWhiteman]

n.b. buttons created by buttons.cm are not trackable in Outlook. You must change <v: to <a: wherever it appears. I wrote about this 5+ years ago on the blog.