How to style link in automation email

[RC]

I'm trying to style a link in my email using the send custom email action. I want the link to look like a button with a blue background and white text white no text decoration (no underline). I'm having trouble getting this to work across different email clients e.g. Gmail and Outlook.

This is the HTML I'm using:

<a href="https://mysite.atlassian.net/servicedesk/customer/portal/7" style="display: inline-block;background-color: #0057d8;color: white;padding: 10px 20px;text-decoration: none;border-radius: 2px;font-size: 16px;cursor: pointer;" bgcolor="#0057d8" target="_blank">View work item</a>

I used the same HTML in the notification template and that works fine. It's only when I use it in the send email action in automation that it breaks.

Expected result:



Actual result:




I tried a few other ways with not much success.

<span style="color:white;background-color:#0057d8;padding:10px 20px;border-radius:2px;font-size:16px;background:'blue'"><a href="https://mysite.atlassian.net/servicedesk/customer/portal/7" style="color:white;text-decoration:none;">View work item</a></span>

<p><br><a href="https://mysite.atlassian.net/servicedesk/customer/portal/7" style="display:inline-block;background-color:#0057d8;color:white;padding:10px 20px;text-decoration:none;border-radius:2px;font-size:16px;">View work item</a><br></p>

[RC]

Thank you all for your suggestions. They were really helpful.

[Igor Medeiros - Modus Create]

Hi @RC ,

Here's an example of what you could use in automation:

<a href="https://mysite.atlassian.net/servicedesk/customer/portal/7"
style="display:inline-block;
background-color:#0057d8;
color:#ffffff;
padding:10px 20px;
text-decoration:none;
border-radius:2px;
font-size:16px;
cursor:pointer;"
target="_blank">
View work item
</a>

Additionally, if you are looking for better ways to customize notification templates and triggers, I'd like to suggest our app Notification Assistant for Jira.

It allows you to easily create custom templates that suit your needs, as in the example below:

Best,
Igor Medeiros

[Ashok Shembde]

Hi RC,
Can you use this code it will be working your expectation.

<tr>
<td align="center" style="padding:8px 0 20px 0;">
<!-- outer table for button for better email client compatibility -->
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;">
<tr>
<td align="center" bgcolor="#0b74ff" style="border-radius:6px;">
<a href="{{VIEW_URL}}" target="_blank" style="display:inline-block;padding:12px 22px;font-size:15px;color:#ffffff;text-decoration:none;font-weight:600;border-radius:6px;">
View Work Items
</a>
</td>
</tr>
</table>
</td>
</tr>

[Anthony Morais]

Hi @RC 

Try this one, it's the best I could do.

<!-- Outlook (VML) -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
href="https://mysite.atlassian.net/servicedesk/customer/portal/7/"
style="height:100px;v-text-anchor:middle;width:300px;" arcsize="10%"
stroked="f" fillcolor="#0057d8">
<w:anchorlock/>
<center style="color:#FFFFFF; font-family:Arial, sans-serif;
font-size:42px; font-weight:700; mso-line-height-rule:exactly;">
View work item
</center>
</v:roundrect>
<![endif]-->

<!-- Demais clientes -->
<!--[if !mso]><!-- -->
<table role="presentation" border="0" cellspacing="0" cellpadding="0"
align="left" width="300" style="margin:0; width:300px;">
<tr>
<td align="center" width="300" bgcolor="#0057d8"
style="background-color:#0057d8 !important;
border-radius:10px; padding:28px 20px;">
<a href="https://mysite.atlassian.net/servicedesk/customer/portal/7/"
target="_blank" role="button" aria-label="View work item"
style="display:inline-block !important; width:auto !important;
text-align:center; font-family:Arial, Helvetica, sans-serif;
font-size:42px !important; line-height:44px !important;
font-weight:700 !important; color:#FFFFFF !important;
text-decoration:none !important;">
<span style="color:#FFFFFF !important; text-decoration:none !important;">
<font color="#FFFFFF">View work item</font>
</span>
</a>
</td>
</tr>
</table>
<!--<![endif]-->



Hope it helps!