Mede dankzij de mogelijkheden van CSS3 zijn er diverse mogelijkheden om mooie / leuke knoppen te maken voor op jouw website. Je hoeft dus niet meer met Photoshop of een ander tekenprogramma aan de slag om een aardige button te ontwerpen. Maar ondanks dat je een leuke knop kunt designen met CSS, is het nog best lastig om de stylesheet codes goed te krijgen en hierin ook de juiste kleuren te verwerken. En ben je klaar dan valt het resultaat misschien zelfs een beetje tegen en moet je opnieuw de CSS aanpassen.
Maar je kunt ook gewoon lekker aan de slag met diverse online button generators. Er zijn diverse sites waarop je de CSS code van een leuke knop kunt laten genereren. Hieronder noem ik een paar sites met een CSS knoppen generator erop:
- http://www.cssbuttongenerator.com/ Een handige tool want hierin zitten alvast wat kleurschema’s en het is verder vrij eenvoudig in het gebruik. Er missen wel een paar extra tweaks die andere tools wel hebben maar dat is het gevolg van het eenvoudig willen houden van de tool vermoed ik. Wat ook handig is, de achtergrond van de preview knop is hier effen grijs waardoor je via een screenprint de knop eenvoudig kunt uitknippen en in jouw Photoshop ontwerp kunt plaatsen.
- http://css-tricks.com/examples/ButtonMaker/
Deze is iets minder vriendelijk in het gebruik en heeft iets minder opties maar doet de klus ook prima. De knop staat hier op een fancy achtergrond en ziet er daardoor wat leuker uit maar dit is lastig uitknippen in een tekenpakket. - http://css3button.net/
De knop generator bevat eigenlijk alle mogelijke opties. In eerste instantie mis je hier de presets / kleurschema’s. Maar die zijn hier juist in grote aantallen aanwezig. Je moet dan alleen klikken op “showcase” en dan krijg je meer dan 12500 voorbeeldknoppen te zien. Helaas heb je hier geen mogelijkheid om de knoppen te filteren op kleur / stijl / etc. waardoor je niet kunt zoeken naar een geschikte knop in deze massa aan buttons. - http://www.cssbutton.me
Ja dit is een flinke CSS button tool. Ik zou bijna zeggen: wouw! Maar dit is niet direct geschikt voor een beginner. Aan de andere kant, door gewoon maar wat te proberen zie je direct wat de gevolgen zijn van jouw instellingen. Dan zie je ook wat voor gekke buttons je hier kunt ontwerpen zoals buttons met schuine zijkanten, volledig rond, etc. Ook kun je werken aan een bestaande button vanuit de button templates optie. Hier staan nu nog slechts 5 voorbeeldbuttons maar daar komen misschien later meer templates bij. En als je inlogt dan kun je de door jou ontworpen knopjes opslaan. - http://www.glassybuttons.com/glassy.php
Maar misschien wil je een glassy button / glas knop en juist niet een CSS / html only knop? Dat kan op deze site. Ontwerp hier jouw glassy button en zodra je tevreden bent dan download je deze knop als afbeelding. Geen gedoe verder ook met browser versies, ondersteuning voor CSS 3, etc. - http://www.cssbuttonmaker.com/
Deze tool heeft veel weg van de eerst genoemde tool cssbuttongenerator.com alleen ziet deze er iets minder mooi uit. Ik zou deze zelf dus minder snel gebruiken. Maar handig om te vermelden in het geval cssbuttongenerator.com uit de lucht is of wanneer deze site niet meer gratis is! 🙂
Related articles
- Designing in the Browser is Not the Answer (andybudd.com)
- CSS bits: the mouse cursor (css.dzone.com)
Geen reacties