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
Maar 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
Maar 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à:
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!
Ik ben het maar hoor, niet stressen.
I’ve spent over 25 years working in content strategy and digital transformation, which means I’ve seen enough technology hype cycles to be skeptical and enough genuine innovation to stay curious.
Want to talk shop? Do get in touch!
ik gebruik altijd cssbuttongenerator.com
Genereert nette HTML/CSS (geen statische afbeelding) en lijkt met veel browsers compatible.