email
Kugelsichere Knöpfe
Suche…
Einführung
Bemerkungen
Progressive Verbesserung mit Medienabfragen
Bei Clients, die Medienabfragen unterstützen, kann die Schaltfläche mit jedem der oben genannten Beispiele schrittweise verbessert werden.
Z.B. @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }
Fügen Sie mehr horizontale Auffüllung in Outlook hinzu
Durch das Hinzufügen von geschützten Leerzeichen auf jeder Seite einer Schaltflächenverknüpfung kann die horizontale Auffüllung für Outlook erhöht werden. Besonders nützlich für randbasierte Schaltflächen.
`<!--[if mso]> <![endif]-->Link Text<!--[if mso]> <![endif]-->`
Buttons.cm-Schaltfläche
Campaign Monitor hat ein geschicktes Tool entwickelt , das Code für Schaltflächen in HTML-E-Mails generiert. Es verwendet eine Kombination aus CSS und VML (für Microsoft Outlook), um Hintergrundbilder oder Muster in den meisten großen E-Mail-Clients anzuzeigen.
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
<v:fill type="tile" src=""https://imgur.com/clZqdfM.gif"" color="#99c739" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Stack Overflow</center>
</v:roundrect>
<![endif]--><a href="http://www.stackoverflow.com"
style="background-color:#99c739;background-image:url("https://imgur.com/clZqdfM.gif");border:1px solid #7ea613;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Stack Overflow</a></div>
Wird so etwas anzeigen: 
Hinweis : Da sich der anklickbare Hyperlink in Outlook in einem VML Tag befindet, haben einige E-Mail-Dienstanbieter Probleme, Klicks auf diesen Link zu ermitteln.
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
Padding-basierte Tasten
Diese Technik beruht auf der Auffüllung auf Tabellenzellenebene, um die Schaltfläche zu strukturieren, und sowohl HTML-Attributen als auch CSS, um die Schaltfläche zu gestalten. Keine VML bedeutet einfacheren Code, aber keine Hintergrundbilder in Outlook.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
Der Nachteil von Auffüll-basierten Schaltflächen ist, dass nicht der gesamte Bereich der Schaltfläche angeklickt werden kann, sondern nur die Verknüpfung innerhalb der Tabellenzelle.
Rahmenbasierte Schaltflächen
Bei dieser Technik müssen Sie dem Link selbst dicke Rahmen hinzufügen, um den CTA der Schaltfläche zu erstellen. Die Verwendung von Rahmen wird von E-Mail-Clients allgemein verstanden, die Volltonfarben der Schaltflächen sind jedoch begrenzt.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
Das Link-Tag ist als Element auf Blockebene festgelegt, und für die Auffüllung werden Ränder verwendet, sodass die gesamte Schaltfläche selbst in älteren Desktop-Clients zum Schweben und Anklicken verwendet werden kann.
Der Nachteil von Rahmen-basierten Schaltflächen besteht darin, dass Outlook die Größe der Rahmen um einen geringen Betrag verringert und Hintergrundbilder nicht unterstützt werden.
Auffüllen + Rand-basierte Schaltflächen
Diese Technik verwendet eine Kombination aus randbasierten und auf Abstand basierenden Schaltflächen, wobei der Link sowohl mit Abstand als auch mit einem festen 1px-Rahmen gestaltet wird. Die Hintergrundfarbe muss in diesem Fall auf das statt auf das angewendet werden, da Outlook die horizontale Auffüllung des Tags erkennt (da es sich nicht um ein Block-Level-Tag handelt).
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#0095FF"><a href="https://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #0095FF; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
Der Nachteil des Auffüllens + der Border-basierten Schaltflächen besteht darin, dass das Styling zwischen einem <td> und einem <a> -Tag getrennt wird, so dass die Pflege schwierig sein kann. Es wird jedoch nur eine Schaltfläche verwendet, bestimmte Abmessungen sind nicht erforderlich, und Hintergrundbilder können unterstützt werden.
Kugelsicherer Knopf mit Abstandshaltern
Diese Schaltfläche leitet sich aus diesem Beispiel per Email an Acid ab. Es ist vollständig code-basiert und wird daher ohne heruntergeladene Bilder angezeigt. Die gesamte Schaltfläche ist schwebbar + anklickbar.
Darüber hinaus enthält dieses Beispiel auch Abstandhalter, um zu steuern, wie viel vertikaler Abstand vor und nach der Schaltfläche angezeigt wird.
<table width="100%">
<tr>
<td>
<!-- Top Spacer : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<!-- Top Spacer : END -->
<!-- Button : BEGIN -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" bgcolor="#0077CC" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.stackoverflow.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0;text-align: center; font-weight: bold; font-size: 14px; font-family: sans-serif; color: #ffffff; background: #0095FF;border: 1px solid #0077CC; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:17px;" class="button_link">Stack Overflow</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END -->
<!-- Bottom Spacer : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<!-- Bottom Spacer : END -->
</td>
</tr>
</table>
