Je bent erg handig in het aanpassen van je website qua functionaliteit, maar grafisch wil het allemaal niet echt lukken. Geen nood, in deze en de volgende blog worden de leukste en handigste sites op een rij gezet zodat je makkelijk je website van een fris uiterlijk kunt voorzien. We beginnen met een overzicht voor mooie gratis knoppen voor op je website. Let op: een klein beetje kennis van Photoshop of een soortgelijk programma is wel gewenst.

De kracht van een goede knop

Vaak worden knoppen gebruikt voor een call-to-action. Ze moeten bezoekers aanzetten tot een specifieke handeling, zoals het kopen van een product, het inschrijven voor een nieuwsbrief of een brochure aanvragen.

De kracht van een goede knop op je website is dat hij opvalt. Dit kun je doen door de knop een kleur te geven die afwijkt van de huisstijl, zoals groen of oranje (dit gaat natuurlijk niet op voor websites met als hoofdkleur groen of oranje).

Een ander belangrijk onderdeel van een een goede knop die aanzet tot conversie is de plek waarop deze geplaatst is. De perfecte plaats voor een knop bestaat niet, maar een knop in de header van de website heeft wel een grote kans slagen, omdat het een erg prominente locatie is die meteen opvalt bij de bezoeker. Om voor jou website de perfecte plek voor de call-to-action knop te vinden is het aan te raden om A/B-testen uit te voeren.

Genoeg theorie, je wilt weten waar je mooie knoppen kunt krijgen op het wereldwijde web waarmee je je website kan pimpen.

Website 1: Da Button Factory

Da Button Factory is een goede website als je zonder al te veel kennis een mooie knop wilt maken. Toch is het mogelijk om veel in te stellen aan je knop:

  • De vorm: ronde hoeken, een ronde knop of geen afgeronde hoeken;
  • Soort achtergrond: een verloop, 1 kleur, 2 kleuren, etc.;
  • De grootte van de knop: deze kan variabel zijn of een vaste grootte hebben;
  • Tekstopties: een schaduw toevoegen aan de tekst, het font kiezen en last but not least: de tekst van de knop bepalen.
  • Het resultaat: je kunt er voor kiezen om de knop als afbeelding te downloaden of als CSS-achtergrond.

Persoonlijk vind ik dit een goede website om snel even een knop in elkaar te zetten, zonder dat je een designwonder hoeft te zijn.

Da Button Factory

Website 2: 36 website buttons op Sketchdock

Op Sketchdock is het mogelijk om helemaal gratis 36 knoppen te downloaden. De knoppen die je downloadt zijn al voorzien van teksten, maar met een beetje verstand van Photoshop is dit makkelijk zelf aan te passen. Hetzelfde geldt voor de kleuren van deze knoppen. Zit de kleur die je wilt er wel bij? Verander de tekst en gebruik de knop voor je website!

Sketchdock

Site 3: CSS3 Button Maker

Ook met behulp van CSS3 Button Maker is het mogelijk om een knop op maat te maken. Deze website gaat zelfs zo ver dat het mogelijk is om de effecten te bepalen als je over de knop heen gaat met je cursor, zowel qua achtergrond als qua tekstkleur. Het eindresultaat is een stuk CSS3-code die je kunt gebruiken in de stylesheet van je website. Wil je deze CSS3-knop ook gebruiken in Internet Explorer, dan is dat mogelijk met behulp van het volgende script.

CSS3 Button Maker

Site 4: Designmoo

Op Designmoo is veel te vinden op grafisch gebied, zo ook prachtige knoppen voor je website. Zo zijn er strakke downloadknoppen te vinden, maar ook eenvoudige knoppen en registratieknoppen voor bijvoorbeeld je nieuwsbrief.

Kun je redelijk de weg vinden in Photoshop of een soortgelijk programma? Dan is Designmoo een prachtige site om een basisvoorbeeld voor goede knoppen te vinden.

Designmoo

Site 5: Zardi CSS3 buttons

De laatste website die ik persoonlijk de moeite waard vind is die van Zardi CSS3 Buttons. Hier kun je 3 stijlen knoppen (afgeronde hoeken, ronde knop, rechthoekige knop) downloaden in 7 kleuren. Het mooie van deze knoppen is, is dat ze uit pure HTML + CSS3 zijn opgebouwd. Wil je deze CSS3-knoppen ook gebruiken in Internet Explorer, dan is dat mogelijk met behulp van het volgende script.

Zardi CSS3 Buttons

Je hebt nu een aantal websites waar je met wat basis grafische kennis prachtige knoppen kunt maken. De volgende stap is om de website te voorzien van leuke iconen, maar daarover de volgende keer meer.

Hebben jullie nog goede tips of websites voor gratis knoppen? Laat deze dan achter in de comments!


Geschreven door