cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
charizard
Helper I
Helper I

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

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>

 

 

1 REPLY 1
v-bofeng-msft
Community Support
Community Support

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

 

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Users online (5,095)