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;  

  }

Answer 1

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. (eg 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? .

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

Question

1 answers

solution1
3 ACCPTED 2013-12-13 17:24:11

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

Question

1 answers

solution1 3 ACCPTED 2013-12-13 17:24:11

solution1
3 ACCPTED 2013-12-13 17:24:11