Design en copy zijn op internet nauwelijks los van elkaar te zien. Van een freelancer wordt dan ook nogal wat duizendpotigheid verwacht. Daar hoort het maken van call-to-action buttons meestal bij. Voor een ontwerp-nono als ik betekende dat tot voor kort grote stress. Totdat ik deze supersnelle, gratis call-to-action-button-maak-truc ontdekte.

Of je je tekst meteen even online wil zetten. Met call-to-action buttons erbij (je weet wel, die knoppen onderaan een tekst waar meestal ‘Bestel!’ of ‘Vraag een offerte aan!’ op staat) die een beetje bij het ontwerp van de site passen, natuurlijk. Moet je net mij hebben: half kleurenblind (als ik een euro kreeg voor iedere keer dat ik heb gehoord: ‘Die das bij dat overhemd? Weet je dat zeker?’…) en in paniek bij de eerste brush, layer of shadow. En in het theme van de site is natuurlijk netjes een direct bruikbare button class gedefinieerd. Not.

Da Button Factory

Da Button FactoryMaar er is (bijna) geen probleem dat niet met een beetje Googlen is op te lossen. En zo vond ik Da Button Factory. Met een paar eenvoudige instellingen vorm je het ontwerp van je button. Tekst invoeren, kleur kiezen en downloaden als png-bestand.

Kleur bekennen met Colorfy It

Colorfy ItMaar hoe kies je de goede kleur? Je kunt natuurlijk in de CSS van zo’n site duiken op zoek naar kleurcodes maar dat kun je ook laten doen. Daarvoor vond ik Colorfy It, een gratis web app die alle kleurcodes uit de stylesheets van een site haalt en aangeeft hoe vaak ze gebruikt worden. Zoek de kleur die je nodig hebt, kopieer de kleurcode naar Da Button Factory en klaar!

Klikt u maar!

Als voorbeeld heb ik een button gemaakt in de stijl van 42bis. De buttons hier zijn rechthoekig, met schreefloze letters. In dat geval is Calibri meestal een veilige keuze. In de kleuranalyse van Colorfy It valt het roze van de knoppen meteen op. Ga je met de muis over het kleurvakje, dan zie je dat de kleurcode #b82da2 is. Vreemd genoeg kun je dat niet copy-pasten dus je moet hem overtikken in de kleurkiezer van Da Button Factory. Klaar? Klik op ‘download’ en voilà:

button

 

Jullie kunnen dat vast beter

Ik weet het, helemaal zoals de andere knoppen op de site is hij niet. Een designperfectionist zou er dan wellicht ook wat moeilijk bij kijken, maar het is snel en het werkt. Als jullie een betere manier weten hoor ik het natuurlijk graag hieronder in de comments!

0 Shares:
1 comment
  1. ik gebruik altijd cssbuttongenerator.com
    Genereert nette HTML/CSS (geen statische afbeelding) en lijkt met veel browsers compatible.

Comments are closed.

Dit artikel is 12.861 keer gelezen