Buttons en knoppen voor ‘klik hier’ teksten
Bijgewerkt: 20 september 2023
Weet je niet hoe je gebruikers aanzet tot het klikken op een link? Sommige webmasters lopen ook met dit probleem rond. Ze gebruiken de woorden “Klik hier“ om links aan te duiden.
Voordat je dit doet, moet je weten dat deze woorden vaak een negatief effect hebben. Buiten het feit dat schermlezers er niet mee om kunnen gaan. En dat je linkje geen meerwaarde voor je SEO-strategie heeft.
Ben je toch geïnteresseerd in zogenaamde ‘klik hier’ teksten, dan heb ik wat leuke buttons en knoppen voor jou. Zo maak je die saaie tekst toch nog een beetje aantrekkelijk.
CSS Buttons
Problemen om meer verkeer naar je website te krijgen?
Hoi, ik ben Bianca en help websites doorgroeien. Zal dit jouw website zijn?
Wanneer je een CMS zoals WordPress hebt, kun je met de editor heel makkelijk knoppen maken. Maar wanneer dit niet mogelijk is, moet je middels css werken. Hieronder de basis voor het maken van buttons oftewel knoppen voor je website.
Om een button met css te maken, doorloop je de volgende stappen:
Stap 1: html-structuur
Je begint met het maken van een HTML-element, waarin je de knop wilt plaatsen. Dit kan binnen een paragraaf <p>, een formulier <form> of een element <div>.
<!DOCTYPE html>
<Html>
<head>
<title>Button met CSS</title>
</head>
<body>
<div class="button-container">
<button class="my-button">Klik hier</button>
</div>
</body>
</html>Stap 2: css-stijl toevoegen
Vervolgens moet je de stijl van je knop aanpassen. Dit doe je in een extern css-bestand. Heb je een WordPress website, dan ga je naar thema > customer > CSS.
Hieronder een voorbeeld van een css-code, om de stijl van de knop aan te passen.
/* Stijlen voor de container (div) waarin de knop zich bevindt */
.button-container {
text-align: center; /* De knop in het midden van de container plaatsen */
}
/* Stijlen voor de knop zelf */
.my-button {
padding: 10px 20px; /* Binnenste vulling van de knop */
background-color: #3498db; /* Achtergrondkleur */
color: #ffffff; /* Tekstkleur *
border: none; /* Geen rand om de knop */
border-radius: 5px; /* Afgeronde hoeken */
cursor: pointer; /* Cursor verandert in een handje wanneer je eroverheen gaat */
font-size: 16px; /* Tekstgrootte */
}
/* Stijlen voor de knop wanneer er overheen wordt gehoverd */
.my-button:hover {
background-color: #2980b9; /* Andere achtergrondkleur bij hover */
}Stap 3: css-bestand koppelen aan het html-bestand
Vervolgens voeg je in het html-bestand een regel toe, zodat duidelijk is dat je het css-bestand hieraan koppelt. De volgende regel moet je in het <head> gedeelte van het html-bestand plaatsen:
<link rel=”stylesheet” type=”text/css” href=”jouw-stijlen.css”>
Let op dat ook dit weer een voorbeeld is.
Zelf eenvoudig buttons maken met behulp van css
Wanneer je een beetje vertrouwd bent met css, kun je buttons geheel naar stijl aanpassen. Hieronder een voorbeeld van wat css-codes voor buttons met verschillende kleuren of afmetingen.
- .button1 {background-color: #4CAF50;} /* Green */
- .button2 {background-color: #008CBA;} /* Blue */
- .button3 {background-color: #f44336;} /* Red */
- .button4 {font-size: 10px;}
- .button5 {font-size: 16px;}
- .button6 {font-size: 24px;}
Met bovenstaande voorbeelden kun je flink experimenteren.
Ronde buttons maken
Wil je jouw klik hier tekst in een ronde button plaatsen? Dan moet je de border-radius gebruiken, hiermee creëer je ronde hoeken. Hoe groter de border-radius, hoe ronder de knop wordt. Bijvoorbeeld:
- .button2 {border-radius: 4px;}
- .button3 {border-radius: 8px;}
- .button4 {border-radius: 12px;}
Knoppen alleen met html, zonder css
In html is een ingebouwd element beschikbaar, waarmee je eenvoudige knoppen maakt. Dat ziet er ongeveer zo uit:
<!DOCTYPE html>
<html>
<head>
<title>Button zonder CSS</title>
</head>
<body>
<button>Klik hier</button>
</body>
</html>je maakt dus gebruik van het <button> element. Houd er rekening mee dat deze knop er zeer eenvoudig uitziet. Gebruik css om de stijl van de knop naar wens aan te passen.
Knoppen maken met Javascript
Tegenwoordig wordt Javascript niet meer zo snel gebruikt voor het maken van knoppen of buttons. Maar wel voor interactieve knoppen. Hierbij wordt de knop voorzien van een functie wanneer erop geklikt wordt.
Een bekend voorbeeld hiervan is de knop die oplicht, wanneer je er met de muis overheen gaat. Dit is het bijbehorende Javascript:
<button onclick="myFunction()"> Klik hier</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hallo wereld";
}
</script>Waarom je geen ‘klik hier’ teksten voor hyperlinks moet gebruiken
Je kunt net zoveel buttons op je website plaatsen als je wil. Toch is het verstandig om hier spaarzaam mee om te gaan. Een button moet opvallen. Wanneer er te veel knoppen op een webpagina staan, weet de bezoeker niet meer waar hij op moet klikken.
Misschien denk je dat ‘klik hier’ de bezoeker overtuigt om op de knop te klikken. Maar het leidt juist de aandacht af. Ook zorgt het voor een slechtere ervaring. Gebruikers kunnen aan de intentie van de ‘klik hier’ tekst twijfelen.
Wees duidelijk wat de bezoeker kan verwachten wanneer je op een knop klikt. Deze teksten zijn wél geschikt om op een knop te tonen:
- Ga naar de workshop
- Neem contact op
- Bestellen
- In het winkelmandje
- Toevoegen
- Inschrijven
Nooit verbergen waar gebruikers op klikken
Stel dat je over straat loopt en je ziet een zuil met een grote rode knop. Zou je hier zomaar op klikken? Waarschijnlijk niet, want je weet niet wat er gaat gebeuren. Wanneer er een bordje bij de knop staat met de tekst ‘klik hier’, twijfel je helemaal. Je vertrouwt het niet zo, want misschien gebeurt er wel iets engs.
Dit geldt ook voor bezoekers die op een webpagina terechtkomen. ‘Klik hier’ teksten komen onbetrouwbaar over. De gebruiker heeft geen idee wat er gaat gebeuren. Misschien komt hij wel op een webpagina terecht die zijn creditcardgegevens steelt. Of die een virus op zijn computer installeert.
Dat is de reden waarom de meeste bezoekers nooit op een ‘klik hier’ tekst zullen klikken. Kijk maar eens naar onderstaande twee voorbeelden:
Foto’s van mijn vakantie: klik hier, klik hier en klik hier.
Foto’s van mijn vakantie: op het strand, in het vakantiehuisje en in de trein.
Links hebben en andere kleur als de rest van de tekst
Wanneer je geen knoppen gebruikt maar een normale hyperlink, moet je ervoor zorgen dat de gebruiker hem als zodanig kan herkennen. Daarom moet je de link in een andere kleur als de rest van de tekst maken.
Het is gebruikelijk om linkjes een (licht)blauwe kleur te geven. Maar wanneer de huisstijl van je website oranje, groen of geel is, mogen linkjes ook deze kleur hebben. Zolang het verschil met de rest van de tekst duidelijk is.
Waarom klik hier teksten voor SEO slecht zijn
Zoekmachines volgen linkjes op het internet. Hierbij kijken ze naar de tekst die voor het linkje wordt gebruikt. Wanneer er ‘klik hier’ staat, weten zoekmachines niet waarom het er staat. Want wat heeft dit met de webpagina waarnaar je verwijst, te maken? Daarom worden dit soort linkjes niet hoog gewaardeerd.
Probeer altijd naar zelfstandige naamwoorden verwijzen. Omschrijf het woord wat de bezoeker op die pagina kan verwachten. Bijvoorbeeld ‘De Labrador retriever is een van de meest populaire hondenrassen’. Labrador retriever is een zelfstandig naamwoord en bezoekers zien direct dat het linkje naar een pagina over dit hondenras leidt.
Werkwoorden als ankertekst (de tekst die een link aanduidt), zijn niet aan te raden. Werkwoorden staan voor woorden waarbij een actie wordt aangeduid. Bijvoorbeeld ‘de Labrador retriever loopt veel’. Lopen is in dit geval het werkwoord. Het kan het natuurlijk dat je naar een artikel over lopen wil verwijzen. Maar zelfstandige naamwoorden zijn voor gebruikers toch makkelijker te begrijpen.
Indien het niet anders kan, koppel werkwoorden met zelfstandige naamwoorden. Dat maakt het toch wat begrijpelijker.
Vermijd zeker lidwoorden, voorzetsels, bijvoeglijke naamwoorden en andere woorden als ankertekst. Dus geen linkje achter woorden als ‘de, het, een, is, boven, achter’ plaatsen. En al zeker geen klik hier tekst!
Bianca schreef meer dan 50.000 artikelen voor het internet. "SEO is mijn missie, ik help anderen om hoger in Google te komen". Met zoveel geschreven onderwerpen, SEO- en marketingkennis is ze het startpunt voor elke (nieuwe) website. Een opdracht plaatsen of meer weten over de voordelige tarieven? Vraag vandaag nog de tarievenkaart aan.