Website Buttons Maken Met HTML en CSS

Website buttons, hoe maak je ze en waarom zou je ze willen maken? Twee vragen waarop ik in dit blogbericht een antwoord zal proberen te geven. Laten we eerst eens ingaan op de eerste vraag.

Hoe maak je website buttons?

Knoppen op websites worden vaak gemaakt met behulp van een plaatje. Er wordt een afbeelding gemaakt van een knop en deze knop wordt vervolgens aanklikbaar gemaakt om een andere website pagina te openen. Om het geheel een wat fraaier effect te geven, wordt er vaak ook een tweede afbeelding gebruikt die verschijnt zodra je met de muis boven de knop zweeft.

Wat je voorheen ook vaak zag, maar de laatste jaren steeds minder, is het gebruik van Flash om website buttons mee te maken. Flash is software waarmee je webapplicaties en webanimaties kunt maken. Met flash kun je de meest fantastische dingen maken op je website.

Je kunt je website knoppen ook maken zonder gebruik van plaatjes of flash, je kunt namelijk ook website buttons maken met alleen maar HTML en CSS. Dit is ook waar dit artikel over gaat, maar hoe je je website knoppen maakt met HTML en CSS, daar kom ik dadelijk nog op.

Laten we eerst eens gaan kijken waarom het gebruik van flash niet verstandig is en waarom je voor je website buttons beter HTML en CSS kunt gebruiken in plaats van plaatjes.

Waarom geen flash voor je website buttons?

Ondanks dat je met flash prachtige dingen kunt maken, is het gebruik ervan niet aan te raden. Zoekmachines kunnen niets met flash, dus het zal lastig worden voor zoekmachines om de links van flash buttons te volgen.

Daarbij, de meeste mobiele apparaten kunnen ook niets met flash. Zoals je wellicht weet, gebruikt een groot deel van je website bezoekers een mobiel apparaat, dus is het handig om alles op je website goed te laten werken op mobiele apparaten.

Een nadeel van het gebruik van plaatjes voor je buttons

Op zich kun je met afbeeldingen prima website buttons maken, alleen zorgt elk plaatje voor een extra lange laadtijd van je website. Het plaatje moet immers gedownload worden om het te kunnen zien.

Daarbij moet voor elke afbeelding een HTTP request gedaan worden, wat ook weer vertragend werkt.

Voor de snelheid zou je dus veel beter je website buttons kunnen maken met alleen maar HTML en CSS.

Waarom website buttons?

Op zich zijn knoppen in je website teksten niet heel belangrijk, je kunt immers ook prima toe met gewone hyperlinks. Toch kunnen buttons soms handig zijn. Zo kun je met een button meer de aandacht trekken, wanneer je een link hebt waarvan je graag wilt dat er op geklikt wordt (bijvoorbeeld een link naar een verkoop pagina).

Daarnaast kan in sommige gevallen een knop er ook gewoon mooier uit zien dan een gewone hyperlink. Dit zou ook een reden kunnen zijn om een knop te gebruiken in plaats van een hyperlink.

Website buttons maken met HTML en CSS

We komen nu tot de kern van dit artikel, hoe maak je website knoppen met HTML en CSS, dus zonder gebruik te maken van afbeeldingen of flash of andere zaken.

Ik heb hiervoor twee video's gemaakt, één video voor het maken van website knoppen in Wordpress en één video voor het maken van knoppen in Joomla.

Je zou trouwens de knoppen ook kunnen maken zonder systeem als Joomla of Wordpress, het gaat hier immers om puur HTML en CSS. Je zou de code die je in de video ziet dus ook kunnen toepassen op een HTML website.

Website buttons maken in Wordpress

Website buttons maken in Joomla

Een goede bron voor het maken van website buttons met behulp van HTML en CSS is de pagina CSS Buttons op W3schools.com.

ps: Denk je dat dit artikel ook interessant kan zijn voor mensen om je heen, deel het dan via één van de bovenstaande social media buttons.

Plaats reactie

Beveiligingscode
Vernieuwen