Gratis CTA-knopgenerator

Ontwerp een call-to-actionknop met live voorbeeld en kopieer binnen enkele seconden schone HTML en CSS. Kies een preset, stel je kleuren en hover-effect in en plak hem zo in je landingspagina.

Begin met een stijl
Tekst
Kleuren
Vorm en grootte
Effecten
Schaduw
Bij hover
<a href="#" class="cta-button">Aan de slag</a>

Zo maak je een CTA-knop in 3 stappen

Ontwerp een call-to-actionknop die bij je merk past en kopieer in minder dan een minuut schone, direct bruikbare HTML en CSS. Geen ontwerptools en geen programmeerwerk nodig.

  1. 01

    Kies een preset en schrijf je tekst

    Begin met een stijlpreset als Effen, Gradiënt, Omlijnd of Pil en typ daarna de call-to-action die je wilt, zoals Aan de slag of Claim mijn aanbod.

  2. 02

    Pas kleuren, grootte en hover aan

    Stel met de bediening kleuren, grootte, hoekafronding, schaduw en een hover-effect in. Het live voorbeeld werkt direct bij bij elke instelling die je verandert.

  3. 03

    Kopieer de HTML en CSS

    Ga naar het tabblad HTML of CSS en klik op Code kopiëren. Plak hem in je landingspagina, website of e-mailtemplate en je knop staat live.

Waarom je je CTA-knop hier ontwerpt

Een call-to-actionknop is op de meeste landingspagina's het element waarop het vaakst wordt geklikt. Krijg het ontwerp goed en je maakt het bezoekers makkelijker om ja te zeggen, zonder een regel code aan te raken als je dat niet wilt.

Zie hem voordat je hem lanceert

Een live voorbeeld toont exact jouw knop terwijl je hem bijstelt, dus je weet precies hoe hij er op de pagina uitziet voordat je één regel kopieert.

Schone, kopieerklare code

De gegenereerde HTML en CSS zijn netjes en volgen de standaarden. Plak ze in elke site, paginabouwer of e-mail en ze werken gewoon.

Presets die er meteen goed uitzien

De presets Effen, Gradiënt, Omlijnd, Pil, 3D en Ghost geven je met één klik een verzorgd startpunt, waarna je verder verfijnt.

Gratis, privé en zonder registratie

Alles draait in je browser. Geen account, geen limieten en je ontwerp verlaat je apparaat nooit, dus het blijft van jou.

Waar teams de CTA-knopgenerator gebruiken

Van landingspagina's tot e-mailcampagnes: zo zetten marketeers en bouwers een snel knopontwerp in bij alles wat ze lanceren.

Landingspagina's

Ontwerp de primaire call-to-action voor een landingspagina, zodat hij opvalt naast de hero en bezoekers naar het aanbod trekt.

E-mailcampagnes

Genereer HTML met inline stijlen, zodat je knop betrouwbaar wordt weergegeven in e-mailclients zonder externe stylesheet.

Websitebouwers

Zet de CSS in een aangepast codeblok in WordPress, Webflow of elke bouwer waarin je eigen stijlen kunt plakken.

A/B-testen van knoppen

Genereer snel twee of drie knopvarianten met verschillende kleuren en teksten en test welke het best converteert.

Prototypes en mockups

Maak in een handomdraai realistische knoppen voor een snelle demo of een mockup voor stakeholders, zonder ontwerptool of leeg canvas.

Designsystemen

Leg één consistente knopstijl vast, kopieer de CSS één keer en hergebruik dezelfde class op elke pagina en in elke campagne.

Veelgestelde vragen

Een CTA-knopgenerator (call-to-action) is een gratis tool waarmee je visueel een knop ontwerpt en direct bruikbare HTML en CSS kopieert. Je past de tekst, kleuren, grootte, hoekafronding, schaduw en hover-effect aan, en de tool schrijft schone code die je zo in elke website, landingspagina of e-mailtemplate kunt plakken.
Kies een startpreset zoals Effen, Gradiënt, Omlijnd of Pil, typ je knoptekst en stem daarna de kleuren, grootte, hoekafronding en het hover-effect af tot het live voorbeeld goed staat. Ben je tevreden, ga dan naar het tabblad HTML of CSS en klik op Code kopiëren. Plak hem in je pagina en de knop staat live.
Ja. De CTA-knopgenerator is 100% gratis, zonder registratie en zonder limieten. De HTML en CSS die eruit komt mag je gebruiken op zo veel persoonlijke of commerciële websites, landingspagina's en campagnes als je wilt.
Nee. Je ontwerpt de knop met eenvoudige schuifregelaars en kleurkiezers, en de tool schrijft de code voor je. Ken je wel CSS, dan is de output schoon en makkelijk uit te breiden, zodat je hem in je stylesheet kunt zetten en verder kunt bewerken.
Ja. De gegenereerde CSS gebruikt relatieve eenheden en standaardeigenschappen die consistent renderen in moderne browsers en op alle apparaten. Je kunt ook de optie volle breedte aanzetten, zodat de knop meeschaalt op kleinere schermen.
Ja. De preset Gradiënt mengt twee kleuren naar keuze voor een moderne look, en de preset 3D geeft diepte met een gelaagde schaduw. Elke preset is een startpunt dat je verder kunt aanpassen met de bediening voor kleur, grootte, afronding en effect.
Open de instelling Bij hover en kies een effect: Optillen tilt de knop iets op, Verdonkeren maakt de kleur dieper, Gloed voegt een zachte ring toe en Vergroten schaalt hem een tikje op. De gegenereerde CSS bevat de bijbehorende :hover-regel, dus het effect werkt zodra je de code in je pagina plakt.
Goed converterende CTA-knoppen gebruiken tekst die tot actie aanzet (Aan de slag, Claim mijn aanbod), een kleur die sterk contrasteert met de achtergrond, ruime padding zodat de knop makkelijk aan te tikken is, en genoeg formaat om duidelijk het middelpunt van de sectie te zijn. Houd één primaire CTA per scherm aan, zodat de aandacht niet versnippert.
Ja. Klik op Deellink kopiëren en de tool codeert je volledige ontwerp in de URL. Wie die link opent, ziet exact dezelfde knop, klaar om te kopiëren. Handig om een ontwerp naar een teamgenoot te sturen of een versie te bewaren voor later.
Nee. Alles draait volledig in je browser met JavaScript. Je knoptekst en stijlen verlaten je apparaat nooit en worden nooit naar onze servers gestuurd.

Zet je nieuwe knop op een landingspagina die converteert

Een sterke CTA-knop werkt alleen op een pagina die gebouwd is om te converteren. Gebruik LanderLab om in minuten een snelle, mobielvriendelijke landingspagina te lanceren en zet je knop daar waar hij telt.

Aan de slag - het is gratis

Geen creditcard nodig

LanderLab-logo