Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Automate - Building Flows
Unanswered

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

Like (0) ShareShare
ReportReport
Posted on 9 Aug 2022 13:03:18 by 93

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>

 

 

  • v-bofeng-msft Profile Picture
    on 11 Aug 2022 at 05:45:45
    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

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

🌸 Community Spring Festival 2025 Challenge Winners! 🌸

Congratulations to all our community participants!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Automate - Building Flows

#1
David_MA Profile Picture

David_MA 140 Super User 2025 Season 1

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 138 Super User 2025 Season 1

#3
stampcoin Profile Picture

stampcoin 125

Overall leaderboard
Loading started