Best answer

Styling HTML Gmail Draft

  • 26 September 2020
  • 3 replies
  • 948 views

Userlevel 1

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>

icon

Best answer by Danvers 28 September 2020, 12:53

View original

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

Userlevel 7
Badge +14

Make sure the Body Type is set to HTML.

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

 

Userlevel 7
Badge +12

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!

 

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!