Using HTML/CSS to create buttons in Send an Email (V2)

Like (0) Share

Report

Posted on 9 Aug 2022 13:03:18 by charizard

Hi,

I'm trying to use the Send an Email (V2) function to have the user click on a button in the e-mail that redirects them to a link.

Ideally I could use Send an Email with Options to do this but it doesn't seem like I can redirect the user to a custom link using that function.

I've tried using this code just to see if I can have buttons in the email but it doesn't work:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
 border: none;
 color: white;
 padding: 15px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
}

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>

<h1>The button element - Styled with CSS</h1>
<p>Change the background color of a button with the background-color property:</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>

</body>
</html>

All responses (1)

Answers (0)

v-bofeng-msft on 11 Aug 2022 at 05:45:45

Like (0)

Report
Re: Using HTML/CSS to create buttons in Send an Email (V2)

Hi @charizard ,

That is not available.

First, Buttons created by this method are not clickable in emails, which is a known limitation of Outlook.

You might consider using adaptive card instead.

Second, if you wants to set the buttons' behavior , you should use JS , the could shoud be something like this:

<!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button1 {background-color: #4CAF50;} /* Green */ .button2 {background-color: #008CBA;} /* Blue */ </style> </head> <body> <h1>The button element - Styled with CSS</h1> <p>Change the background color of a button with the background-color property:</p> <button onclick="OpenGoogle()" class="button button1">Google</button> <button onclick="OpenBing()" class="button button2">Bing</button> <script > function OpenGoogle(){window.open('https://www.google.com') }; function OpenBing(){window.open('https://www.bing.com') }; </script> </body> </html>

Best Regards,

Bof