CSS knoppen generator

buttons
buttons (Photo credit: sharonstoned1)

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! 🙂
Enhanced by Zemanta
Geen reacties

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

zoeken naar grote afbeeldingen website
Webdesign
Zoek en fix de zwaargewichten: grote afbeeldingen op jouw website lokaliseren

Ten behoeve van SEO en om te voorkomen dat gebruikers gefrustreerd raken, is het verstandig om te zorgen dat je een snel ladende website hebt. Eén van de belangrijkste oorzaken van trages websites en lange laadtijden zijn (te) grote afbeeldingen. Dus de bestanden van de afbeeldingen zijn groot (veel kilobytes) …

super goedkoop een website maken
Webdesign
Super goedkope website met domeinnaam

Je hebt een klein bedrijf, je bent pas net begonnen of je hebt gewoonweg weinig budget. Hoe en waar moet je dan zijn om een super goedkope website te maken met jouw eigen domeinnaam? Op deze website zijn meerdere artikelen te vinden over de verschillende prijzen van hostingproviders, over het …

voordelen nadelen Wordpress
Webdesign
De voordelen en nadelen van WordPress

Misschien overweeg je een website te bouwen of te laten bouwen met behulp van WordPress. Of er is een andere reden dat je onderzoek doet naar WordPress. Hoe dan ook, je vraagt je af: Wat zijn de voordelen van WordPress? En wat zijn de nadelen? Dus je zoekt een duidelijk …

Shares