email
Kogelvrije knoppen
Zoeken…
Invoering
Opmerkingen
Progressieve verbetering met mediaquery's
Voor klanten die mediaquery's ondersteunen, kan elk van de bovenstaande voorbeelden de knop geleidelijk verbeteren.
Bijv. @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }
Voeg meer horizontale opvulling toe in Outlook
Voorwaardelijk toevoegen van niet-afbrekende ruimte aan elke zijde van een knopkoppeling kan de horizontale opvulling voor Outlook vergroten. Vooral handig voor knoppen op basis van randen.
`<!--[if mso]> <![endif]-->Link Text<!--[if mso]> <![endif]-->`
Knoppen. Cm Knop
Campaign Monitor heeft een handige tool gebouwd die code voor knoppen in HTML-e-mail genereert. Het maakt gebruik van een combinatie van CSS en VML (voor Microsoft Outlook) om achtergrondafbeeldingen of patronen in de meeste grote e-mailclients weer te geven.
<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>
Zal iets als dit weergeven: 
Opmerking : aangezien de klikbare hyperlink in Outlook zich in een VML tag bevindt, hebben sommige e-mailproviders problemen bij het bijhouden van klikken op deze link.
<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">
Op pad gebaseerde knoppen
Deze techniek is afhankelijk van opvulling op tabelcelniveau om de knop te structureren, en zowel HTML-kenmerken als CSS om de knop te stijlen. Geen VML betekent eenvoudiger code, maar geen achtergrondafbeeldingen 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>
Het nadeel van op padding gebaseerde knoppen is dat niet op het hele gebied van de knop kan worden geklikt, alleen op de link in de tabelcel.
Op randen gebaseerde knoppen
Deze techniek is gebaseerd op het toevoegen van dikke randen aan de link zelf om de CTA van de knop te bouwen. Het gebruik van randen wordt algemeen begrepen door e-mailclients, maar beperkt het uiterlijk van knoppen effen kleuren.
<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>
De koppelingstag is ingesteld als een blokniveau-element en dat randen worden gebruikt om de opvulling te bieden, zodat de hele knop zwevend + klikbaar is, zelfs in oudere desktopclients.
Het nadeel van op randen gebaseerde knoppen is dat Outlook de randen met een kleine hoeveelheid verkleint en dat achtergrondafbeeldingen, zoals hierboven vermeld, niet worden ondersteund.
Opvulling + op randen gebaseerde knoppen
Deze techniek maakt gebruik van een combinatie van knoppen op basis van randen en opvulling, waarbij de koppeling wordt gestileerd met zowel opvulling als ten minste een stevige rand van 1 px. De achtergrondkleur moet in dit geval worden toegepast op de in plaats van de omdat Outlook horizontale opvulling op de tag herkent (omdat het geen tag op blokniveau is).
<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>
Het nadeel van padding + border-based-knoppen is dat het de stijl scheidt tussen een <td> en <a> tag, dus het kan moeilijk zijn om te onderhouden. Maar er wordt slechts één knop gebruikt, specifieke afmetingen zijn niet vereist en achtergrondafbeeldingen kunnen worden ondersteund.
Kogelwerende knop met afstandhouders
Deze knop is afgeleid van dit voorbeeld via e-mail op zuur. Het is volledig op code gebaseerd, dus het wordt weergegeven zonder gedownloade afbeeldingen, en de hele knop is zweefbaar + klikbaar.
Bovendien bevat dit voorbeeld ook afstandhouders om te helpen bepalen hoeveel verticale ruimte voor en na de knop wordt weergegeven.
<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>
