How can i change background color for a button in email body

[Hareesha]

How can i change background color of a button on email body .I want to change background color for View Request in below image

[AMITDUBEY93]

Absolutely! You can change the background color of the "View Request" button in your email notifications by modifying the associated notification template. Here's how you can approach it:

• Locate the email notification template.
• Find the HTML code for the "View Request" button.
• Change the background-color property in the button's style attribute or the relevant CSS class.
• Save the notification template and test it.

Thanks & regards,

Amit Dubey

[Ehab Pilloor]

Hi,

You can change color of the button by locating the notification template, finding the code for the template (HTML) and change the background color property in the button's style attribute. I would suggest to make a copy of template and make the changes and testing it out.

If you found this reply useful, please mark it as solution and helpful.

Thanks and Regards,

Ehab

[melody_frazier]

Were you able to get this resolved? I'm also looking for a solution. 

[zynsn]

This is the HTML code of the notification template layout. Where is the button located? I don't see it.

<style type="text/css">
	* {
		-webkit-text-size-adjust: none;
	}

	body {
		margin: 0 auto !important;
		padding: 0 !important;
		font-family: Lato, Arial, sans-serif;
	}

	.btn a {
		text-decoration: none;
	}

	.btn.inverse a {
		color: #fff;
	}

	#requestapprove a {
		color: #fff !important;
	}

	span.footer,
	#templateAddress,
	#templateCopyright,
	#templateCopyright *,
	#templateAddress * {
		margin: 0;
		font-size: 14px;
		line-height: 18px;
		color: #ffffff;
	}

	#snc_notification_unsubscribe,
	#snc_notification_preference {
		color: #3C59E7;
		font-size: 16px;
		line-height: 19px;
	}

	#snc_notification_unsubscribe {
		padding-right: 8px;
	}

	#snc_notification_preference {
		padding-left: 8px;
	}

	body,
	table,
	td,
	p,
	a {
		-ms-text-size-adjust: 100% !important;
		-webkit-text-size-adjust: 100% !important;
	}

	table,
	tr,
	td {
		border-spacing: 0 !important;
		mso-table-lspace: 0 !important;
		mso-table-rspace: 0 !important;
		border-collapse: collapse !important;
		mso-line-height-rule: exactly !important;
	}

	.ExternalClass * {
		line-height: 100%;
	}

	.mobile-link a,
	.mobile-link span {
		text-decoration: none !important;
		color: inherit !important;
		border: none !important;
	}
</style>
<div style="margin: 0 auto !important;" align="center">
<table class="w100" style="width: 600px; background-color: #f7f7f9; margin: 0 auto !important; padding: 0px;" border="0" width="600" cellspacing="0" cellpadding="0" align="center" bgcolor="#F7F7F9">
<tbody>
<tr>
<td style="background: #27284A; text-align: center; font-family: Arial, Tahoma, sans-serif; color: #425968; font-size: 13px; line-height: 14px;" align="center">
<table style="border-spacing: 0; width: 100%;" border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr style="background-color: #27284a;">
<td width="140" height="98"><img style="height: 98px;" src="email_template_header.png" width="140" height="98" /></td>
<td align="center" valign="bottom" height="98">
<table style="margin: 0 auto;">
<tbody>
<tr>
<td height="34"><img style="height: 34px;" src="email_template_now_logo.png" height="34" /></td>
</tr>
<tr>
<td height="16"></td>
</tr>
</tbody>
</table>
</td>
<td width="140"></td>
</tr>
<tr style="background-color: #27284a;" height="32">
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr><!-- Left-->
<td valign="top" width="18">
<table width="18" cellspacing="0">
<tbody>
<tr style="background: #27284A;" height="48">
<td></td>
</tr>
</tbody>
</table>
</td>
<!-- CONTAINER -->
<td width="564">
<table class="w100" style="background-image: linear-gradient(to bottom , rgba(39,40,74,1), rgba(247,247,249,0)); margin: 0px; padding: 0px; box-shadow: 0px 2px 10px rgba(23, 40, 52, 0.08);" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody><!-- Main Container -->
<tr>
<td class="pad-sides-20" style="border-radius: 6px; text-align: left; background-color: #ffffff; padding: 24px 24px 24px 24px;" align="center">${notification:body}</td>
</tr>
</tbody>
</table>
</td>
<!-- END CONTAINER --> <!-- Right-->
<td valign="top" width="18">
<table width="18" cellspacing="0">
<tbody>
<tr style="background: #27284A;" height="48">
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color: #f7f7f9;" align="center" height="60">${NOTIF_UNSUB} | ${NOTIF_PREFS}</td>
</tr>
<!-- Footer started -->
<tr style="background-color: #27284a;">
<td>
<table style="background-color: #27284a;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background-color: #27284a;" height="36"></td>
</tr>
<tr>
<td style="background-color: #27284a;" align="center" valign="top" height="38"><img style="height: 20px;" src="email_template_now_logo.png" height="20" /></td>
</tr>
<tr>
<td style="background-color: #27284a; color: #fff;">
<table style="color: #fff;" border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr align="center">
<td><span id="templateAddress" class="footer" style="color: #ffffff; font-size: 12px; line-height: 18px; text-align: center; margin: 0 !important;"> 2225 Lawson Lane, Santa Clara, CA 95054, United States </span></td>
</tr>
<tr align="center">
<td><span id="templateCopyright" class="footer" style="color: #ffffff; font-size: 12px; line-height: 18px; text-align: center; margin: 0 !important;"> &copy; ${mail_script:ec_mail_current_year} ServiceNow Inc. All rights reserved. </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr cellspacing="0">
<td align="center" bgcolor="#27284A" height="102"><img src="email_template_footer.png" width="600" height="102" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Footer end--></tbody>
</table>
</div>