How to use CSS in Emails (specifically, to design hyperlink button)

Question

I'm using Google Apps Script (from a spreadsheet), and I've created several emails that include hyperlinks to forms, etc. I would like to make these links look like buttons. I am a total novice to coding, so the solution can't be too complicated. All the forums suggest using CSS. Is there a way to embed CSS code in a Google Apps Script?

For example, I would like to use this site (click "grab the code" in the bottom right corner) to generate CSS code and then format my hyperlinks by assigning them to the class created by the CSS code. But I don't know the proper way to create the CSS class in Google Apps Script.

Here's the message part of my email:

var message = '<HTML>';
message += "Hi, please click this button.";
message += '<br><br>';
message += '<a href="www.google.com" class="button"/>google</a>';
message += '<br><br></HTML>';

Here's the CSS code that comes from the generator website:

.button{
 text-decoration:none; 
 text-align:center; 
 padding:11px 32px; 
 border:solid 1px #004F72; 
 -webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#E5FFFF; 
 background-color:#3BA4C7; 
 background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
 background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); 
 background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);   
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  

  }

score 3 · Accepted Answer · edited May 23 '17 at 12:23

Since you want to style the button in an Email, you should use inline styling. It's not usually the way you want to do styles, but because of limitations of some email clients, it's the one way your styling will be respected. (e.g. Mozilla Thunderbird will respect an Internal Style Sheet, but Gmail's web mail will not.)

To simplify this for you, why not move the button-creation into a function that you can then call when building your mail? The function htmlMailButton() below is an adaptation of the Awesome Email Button from this blog post.

function sendButtonMail() {
  var recipient = Session.getActiveUser().getEmail();
  var message = '<body>';
  message += "Hi, please click this button.";
  message = htmlMailButton("Google","www.google.com");
  message += '</body>';

  GmailApp.sendEmail(recipient, 'Button', '', {htmlBody:message});
}

// Return HTML representing a clickable "button" labled with buttonLabel, going to link.
// Inspired by http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
function htmlMailButton( buttonLabel, link ) {
  var button = '<table cellspacing="0" cellpadding="0"><tr>'
          + '<td align="center" width="300" height="40" bgcolor="#000091" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">'
          + '<a href="##LINK##" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">##BUTTONLABEL##</a>'
          + '</td> </tr> </table>';
  return button.replace('##BUTTONLABEL##',buttonLabel)
               .replace('##LINK##', link);

}

The Awesome Email Button is a single-cell table, which makes it pretty reliable across many email clients and web services. Instructions for adjusting the size are available in the blog. The background color is controlled by the styling of the <td> (table data) tag, while the text color is in <a>'s style.

Edit: There are handy tools such as MailChimp's CSS Inliner Tool that can help you convert from CSS <style> tags to inline styles. This is helpful if you prefer to develop the look of your email body via CSS. See How do I use Google Apps Script to change a CSS page to one with inline styles?.

Beautiful, Mogsdad. Thank you! The "Awesome Email Button" is perfect for my purposes for now. I searched high and low for a solution like this...thank you for connecting me to it! When I get a bit more comfortable, though, I'm gonna come back to this post and see what I can do with the code you provided. Thanks again! — duck, Dec 13 '13 at 18:13
I've updated the code to make it really, really easy to use in Google Apps Script. Good luck! — Mogsdad, Dec 13 '13 at 18:22
Very sweet. Much more user friendly. Here's an "icing on the cake" question: is it possible to break the hyperlink display text onto multiple lines WITH NO SPACE IN BETWEEN THE LINES? I can get it to break into two lines, but there is a huge space in between. Not sure why. — duck, Dec 13 '13 at 19:33
To break into two lines, include `
` between words. The height of the button is controlled by `height` on the `` tag, the height of lines of text by `line-height` for ``. If you delete both, the table cell's height will resize to contain whatever it contains, and the text line height will be based on the font. The big spacing is because of the 40px line height. — Mogsdad, Dec 13 '13 at 22:37
@user3063164 - you should look at [this answer](http://stackoverflow.com/a/20689529/1677912) for a utility that performs the conversion to inline html. — Mogsdad, Dec 19 '13 at 18:58

How to use CSS in Emails (specifically, to design hyperlink button)

1 Answers1

Linked

Related