Handleiding: CSS Knop Generator

Doel van deze Applicatie

Ontwerp interactieve CSS knoppen visueel. Pas stijlen, afmetingen, schaduwen en hover-effecten aan en zie direct het resultaat. Kopieer de gegenereerde CSS code om te gebruiken in uw eigen projecten.

Stap 1: Tekst & Basis Stijl
  1. Pas de Knop Tekst aan in het voorbeeldgebied door erop te klikken.
  2. Gebruik de "Tekst" sectie in het controlepaneel om Tekstkleur, Grootte, Gewicht etc. aan te passen.
  3. Pas de Achtergrondkleur aan in de "Achtergrond & Rand" sectie.
Stap 2: Afmeting & Vorm
  1. Stel de Padding (interne ruimte) in met de schuifregelaars in de "Afmeting" sectie.
  2. Pas de Rand aan: dikte, stijl (bv. solid, dashed) en kleur.
  3. Gebruik de Border Radius schuifregelaar om de hoeken af te ronden (van vierkant tot pilvorm).
Stap 3: Schaduw & Effecten
  1. Voeg een Box Shadow toe via de "Schaduw" sectie. Pas horizontale/verticale offset, blur en kleur aan.
  2. Activeer Hover Effecten met de checkbox.
  3. Pas de stijlen aan die moeten veranderen wanneer de muis over de knop beweegt (bv. andere achtergrondkleur, tekstkleur, transformatie).
  4. Stel de Transitie Duur in voor vloeiende animaties.
Stap 4: Code Kopiëren
  1. De CSS code wordt automatisch gegenereerd in het "Gegenereerde CSS" vak.
  2. De code bevat regels voor de basisstijl (`.custom-button`) en de hover-staat (`.custom-button:hover`).
  3. Klik op "Kopieer Code" om de CSS naar uw klembord te kopiëren.
  4. Plak de code in uw CSS-bestand en voeg de class `custom-button` toe aan uw HTML-knop (`

Tips

  • Subtiele Hover: Kleine veranderingen in kleur of een lichte transformatie (bv. `scale(1.05)`) geven vaak een professioneel effect.
  • Consistentie: Probeer knopstijlen te laten aansluiten bij de algehele stijl van uw website of applicatie.
  • Toegankelijkheid: Zorg voor voldoende contrast tussen tekstkleur en achtergrondkleur, zowel in normale als in hover-staat.
  • Box Shadow: Experimenteer met meerdere schaduwen (gescheiden door komma's in de CSS) voor complexere diepte-effecten.

Tekst

16px
0px

Achtergrond & Rand

20px

Afmeting

10px
20px

Schaduw (Box Shadow)

0px
2px
5px
0px
0.2

Hover Effecten

0.2s

Gegenereerde CSS

/* CSS wordt hier gegenereerd */
Home