Skip to main content
Best answer

Styling HTML Gmail Draft

  • September 26, 2020
  • 3 replies
  • 1350 views

I’m trying to style a simple html email using html buttons to URL,  I’ve tested the HTML code and it works fine but for some reason it appears as simple text with the buttons as hyperlinks, does anyone have any experience I feel the zapier documentation makes an embarrasing job at making it :

 

<html>
<head>
<style>
.myButton {
background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
background-color:#eee8e1;
border-radius:10px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Fixed Width;
font-size:14px;
font-weight:regular;
padding:7px 13px;
text-decoration:none;
text-align:center;
margin-right: auto;
margin-left: auto;
}
.myButton:hover {
background-color:#F8F5F2;
}
.myButton:active {
position:center; la posición me gustaría que fuera centrado relativo al párrafo
top:1px;
}

body {

font-family: Fixed Width;
font-size: 14px;
}
.child {
width:300px;
margin-right:auto;
margin-left:auto;
}

.p{
font-family:Fixed Width;
font-size:100px;
}

 

</style>

<p> hello {{100231512__field_aNOyXgpCaoJO}}! </p>

<p> Thank you for getting in touch = D </p>
<p><div id='child' > Feel free to see our pricelist </p>

<a href="" class="myButton right" style="justify-content: center;"> View Pricing.</a>
</div>

<p>
  <div id='child' > We appreciate any feedback</p>
 <a href="" class="myButton right" style="justify-content: center;"> Get in touch.</a>
    </div>

 

<p>Cheers, </p>
<p>Alejandro </p>

Best answer by Danvers

Hi @Alejandro O!

The Gmail body input doesn’t allow style or head html tags, so that’s why this wont work in the way that you need. I’m sorry about that!

 

View original
Did this topic help you find an answer to your question?
This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

3 replies

Troy Tessalone
Forum|alt.badge.img+14
  • Zapier Expert
  • 31326 replies
  • September 26, 2020

Make sure the Body Type is set to HTML.

Gmail Sender Resources: https://developers.google.com/gmail/design/css

 


Danvers
Forum|alt.badge.img+12
  • Zapier Staff
  • 3731 replies
  • Answer
  • September 28, 2020

Hi @Alejandro O!

The Gmail body input doesn’t allow style or head html tags, so that’s why this wont work in the way that you need. I’m sorry about that!

 


  • New
  • 1 reply
  • June 22, 2022
Troy Tessalone wrote:

Make sure the Body Type is set to HTML.

Gmail Sender Resources: https://developers.google.com/gmail/design/css

 

Used the CSS Code provided at the link and HTML, solved my problems.  Thank you!