E-mailmarketing: De opmaak van effectieve call-to-action buttons

In mijn vorige blog schreef ik over effectieve teksten voor call-to-action buttons voor e-mailmarketing. In deze blog beschrijf ik de opmaak van een call-to-action button. Waar deze het beste aan moet voldoen en hoe deze wordt opgemaakt qua HTML & CSS. Er zijn naast de tekst, drie aspecten waar een effectieve call-to-action button aan moet voldoen: de kleur, de grootte en de witruimte.

Opvallende kleur

Call-to-action buttons hebben vaak een opvallende kleur die anders is dan de rest van de opmaak. Dit kan een heel eigen kleur zijn, maar kan ook de primaire of secundaire kleur van jouw bedrijfskleuren zijn. Zorg bij de kleurkeuze voor een goed contrast met de tekst van de button.

Juiste grootte

Voor een effectieve call-to-action button voor e-mailmarketing moet goed worden nagedacht over de grootte van de button. Een te grote button kan namelijk schreeuwerig overkomen. De grootte moet in verhouding zijn met de situatie waarin de button wordt gebruikt. Gebruik je de call-to-action button bijvoorbeeld in een tekstkolom over de hele breedte (zoals de bovenste afbeelding in dit artikel), dan kan je de button wat groter maken. Gebruik je de button in een 2-koloms weergave, zorg er dan voor dat de buttons in verhouding zijn met deze kolommen.

Genoeg witruimte

Genoeg witruimte toekennen aan een call-to-action button is een vrij eenvoudige manier om flink op te laten vallen binnen jouw e-mailnieuwsbrief. Als  de button te weinig witruimte krijgt, geeft dit een iets benauwend gevoel doordat alles te dicht op elkaar staat. Je wilt ergens de aandacht op leggen, geef dat dan ook de ruimte.

Code van perfecte call-to-action button

<a href="https://www.pronamic.nl/" target="_blank" style="
	background-color: #87c32b;
	border-top: 21px solid #87c32b;
	border-bottom: 21px solid #87c32b;
	border-left: 42px solid #87c32b;
	border-right: 42px solid #87c32b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	color: #ffffff;
	display: inline-block;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	"
class="mobile-button">Download nu GRATIS &raquo;</a>

Voor de mobiele weergave (kleiner dan 650 pixels) maken we gebruik van een media query:

@media screen and (max-width: 650px) {
	a[class="mobile-button"] {
		border: 0 !important;
		font-size: 16px !important;
		padding: 15px !important;
		text-align: center !important;
		width:90% !important;
	}
}

De bovenstaande CSS uit de media query overschrijft de inline CSS van de button. Daarbij wordt de call-to-action button over de gehele breedte van de kolom getoond en schaalt deze automatisch mee.