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
Power Automate News & Announcements

Power Automate News & Announcements

Keep up to date with current events and community announcements in the Power Automate community.

Power Automate Community Blog

Power Automate Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Users online (6,437)