带有副本和人字形的电子邮件按钮.. 没有 DIVS

Question

我正在尝试创建一个不使用 div 的按钮，因为它是用于电子邮件模板的按钮。我肯定很生气，因为我无法实现我的设计。

我想做的事情非常简单，就像这样：

文本 "Button" 可能会更长并且会动态变化，因此文本应该能够换行并且 V 形 (>) 应该始终垂直居中。

我尝试创建两个跨度标签，一个用于文本，一个用于人字形，但由于跨度（无法定义宽度，它们无法很好地使用 space没有住在一起）

我尝试在 span 上使用 ::after，我目前正在使用它，但如果文本长度为 1-2-3 行，我无法将这个神圣的 V 形字垂直居中。

<a href="#" class="button">
  <span>TEST BUTTON</span>
</a>


.button {
  position: relative;
  display: inline-block;
  width: 220px;
  min-height: 41px;
  background-color: #c9ec6b;
  border-top: 0;
  border-right: 0;
  border-left: 0px;
  cursor: pointer;
  padding: 10px 25px 10px 10px;
}

.button::after {
  content: ">";
  display: block;
  position: absolute;
  right: 14px;
  top: 50%;
}

有什么想法吗？我快疯了。

Answer 1

试试这个transform: translate(0, -50%);

.button::after {
    content: ">";
    display: block;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translate(0, -50%);
}

Answer 2

HTML 电子邮件基本上停留在 90 年代，因为您需要能够支持的客户。（例如，Outlook 使用 MS Word 中的引擎来呈现 HTML，这很疯狂。）既然如此，在 HTML 电子邮件中最好的选择是使用 tables，并且不仅如此，还有 tables 在 tables 之内。

这听起来很糟糕，确实如此，但这是 HTML 电子邮件的现实。

另一件事是您不能依赖样式表。即使是 Gmail 也会拒绝你的整个脑袋，所以你放在那里的任何东西基本上都会消失。

您需要尝试结合使用老式的 table 布局（可以通过内联 CSS 像 max-width 来响应）和内联 CSS.您可以单独编写 CSS，但您应该使用内联工具，例如 provided by Mailchimp.

你可能会得到这样的结果：

<a href="http://google.com" target="_blank" style="display: block; text-decoration: none; color: black; font-size: 32px;">
  <table>
    <tbody>
      <tr style="border: 3px solid black;">
        <td style="padding-top: 10px; padding-right: 20px; 
                   padding-bottom: 10px; padding-left: 20px;">Button
        </td>
        <td style="padding-top: 10px; padding-right: 20px; 
                   padding-bottom: 10px; padding-left: 20px;">>
        </td>
      </tr>
    </tbody>
  </table>
</a>

奇怪，但这是 HTML 给你的电子邮件。

带有副本和人字形的电子邮件按钮.. 没有 DIVS

email button with copy and chevron.. NO DIVS

html

css

button

html-email