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

(0) Share

Report

Posted on 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 at

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