如何在电子邮件中使用 CSS(特别是设计超链接按钮)

2022-01-23 00:00:00 google-sheets gmail google-apps-script html css

我正在使用 Google Apps 脚本(来自电子表格)，并且我创建了几封电子邮件，其中包含指向表单的超链接等.我想让这些链接看起来像按钮.我是一个编码新手，所以解决方案不能太复杂.所有论坛都建议使用 CSS.有没有办法在 Google Apps 脚本中嵌入 CSS 代码?

例如，我想使用本站(点击抢码"右下角)生成 CSS 代码，然后通过将它们分配给由 CSS 代码创建的类来格式化我的超链接.但我不知道在 Google Apps Script 中创建 CSS 类的正确方法.

这是我电子邮件的消息部分:

var message = '<HTML>';message += "您好，请点击此按钮.";消息 += '<br><br>';message += '<a href="www.google.com" class="button"/>google</a>';消息 += '<br><br></HTML>';

这是来自生成器网站的 CSS 代码:

.button{文字装饰:无；文本对齐:居中；填充:11px 32px；边框:实心 1px #004F72;-webkit-border-radius:4px；-moz-边界半径:4px；边框半径:4px；字体:18px Arial, Helvetica, sans-serif;字体粗细:粗体；颜色:#E5FFFF；背景颜色:#3BA4C7;背景图像:-moz-linear-gradient(顶部，#3BA4C7 0%，#1982A5 100%)；背景图像:-webkit-linear-gradient(顶部，#3BA4C7 0%，#1982A5 100%)；背景图像:-o-linear-gradient(顶部，#3BA4C7 0%，#1982A5 100%)；背景图像:-ms-线性渐变(顶部，#3BA4C7 0%，#1982A5 100%)；过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0);背景图像:线性渐变(顶部，#3BA4C7 0%，#1982A5 100%)；-webkit-box-shadow:0px 0px 2px #bababa，插图 0px 0px 1px #ffffff;-moz-box-shadow:0px 0px 2px #bababa，插图 0px 0px 1px #ffffff;盒子阴影:0px 0px 2px #bababa，插图 0px 0px 1px #ffffff;}

解决方案

既然你想在电子邮件中设置按钮的样式，你应该使用内联样式.这通常不是您想要的样式，但由于某些电子邮件客户端的限制，这是您的样式将受到尊重的一种方式.(例如，Mozilla Thunderbird 会尊重内部样式表，但 Gmail 的网络邮件不会.)

为了为您简化这一点，为什么不将按钮创建移到一个函数中，然后您可以在构建邮件时调用它呢?下面的 function htmlMailButton() 改编自这篇博文.

函数 sendButtonMail() {var 收件人 = Session.getActiveUser().getEmail();var message = '<body>';message += "您好，请点击此按钮.";message = htmlMailButton("谷歌","www.google.com");消息 += '</body>';GmailApp.sendEmail(recipient, 'Button', '', {htmlBody:message});}//返回表示带有 buttonLabel 标记的可点击按钮"的 HTML，用于链接.//灵感来自 http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/函数 htmlMailButton(按钮标签，链接){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; 边框半径: 5px; 颜色: #ffffff; 显示: 块;">'+ '<a href="##LINK##" style="color: #ffffff; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration:无；行高:40px；宽度:100%；显示:inline-block">##BUTTONLABEL##</a>'+ '</td></tr></table>';return button.replace('##BUTTONLABEL##',buttonLabel).replace('##LINK##', 链接);}

Awesome Email Button 是一个单单元表格，这使得它在许多电子邮件客户端和 Web 服务中都非常可靠.博客中提供了调整大小的说明.背景颜色由 <td>(表格数据)标签的样式控制，而文本颜色是 <a> 的样式.p><小时>

有一些方便的工具，例如 MailChimp 的 CSS Inliner Tool 可以帮助您转换从 CSS <style> 标签到内联样式.如果您更喜欢通过 CSS 开发电子邮件正文的外观，这将很有帮助.请参阅如何使用 Google Apps 脚本将 CSS 页面更改为具有内联样式的页面?.

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;  

  }

解决方案

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

相关文章