CSS Knop Generator
Genereer direct gestylde CSS-knoppen. Kies uit flat, outlined, gradient, shadow en ghost — kopieer de CSS en HTML in één klik.
① Typ je knoptekst ② Kies stijl en vorm ③ Kopieer CSS en HTML
Stijl
Vorm
Hoofdkleur
#C9B89A
Hoe het werkt
Elke stijl gebruikt pure CSS zonder JavaScript. Flat en gradient gebruiken gevulde achtergronden; outlined en ghost gebruiken transparante achtergronden met randen; shadow voegt een gekleurde box-shadow toe.
Vormopties
Vierkant gebruikt border-radius 4px voor scherpe hoeken. Afgerond gebruikt 8px voor een modern uiterlijk. Pil gebruikt 9999px voor een volledig afgeronde capsule.
Hover-statussen
De gegenereerde CSS bevat hover-stijlen met opacity: 0.85 of filter: brightness() zodat je slechts één kleurvariabele nodig hebt voor standaard- en hover-statussen.
.btn {
padding: 0.6em 1.4em;
cursor: pointer;
font-size: 15px;
font-family: inherit;
border-radius: 8px;
transition: all 0.2s;
background: #c9b89a;
color: #fff;
border: none;
}
.btn:hover {
opacity: 0.85;
}
HTML-uitvoer<button class="btn">Click me</button>
Wat is een CSS-knopgenerator?
Een CSS-knopgenerator is een tool die een gebruiksklare .btn CSS-klasse en bijpassende HTML-markup produceert voor gestylde knopcomponenten. Modern knopontwerp omvat keuzes voor background, border-radius, font-size en interactieve hover-statussen. Veelgebruikte patronen: flat (solide vulling), outlined (transparant met rand), gradient, shadow (gekleurde box-shadow-gloed) en ghost (semi-transparante vulling).
Veelgestelde vragen
Een flat-knop gebruikt een enkele solide achtergrondkleur zonder verlopen of schaduwen. Een gradient-knop gebruikt een linear-gradient van de hoofdkleur naar een donkerdere tint van dezelfde kleur.
De outlined-stijl gebruikt een transparante achtergrond met een gekleurde rand (2px solid) en gekleurde tekst. Bij hover krijgt de knop doorgaans een subtiele achtergrond.
Een ghost-knop gebruikt een zeer licht getinte achtergrond (kleur met 13% alpha) en een semi-transparante rand (44% alpha). Het creëert een minimalistisch uiterlijk geschikt voor tertiaire acties.
De donkerdere tint wordt berekend door de hex-kleur naar HSL te converteren en de lichtheid met 20% te verlagen.
De gegenereerde knoppen hebben voldoende kleurcontrast. Voor volledige toegankelijkheid, voeg aria-label-attributen toe en zorg dat focusstijlen zichtbaar zijn.
De gegenereerde CSS bevat hover-statussen. Voor focus en active, voeg :focus { outline: 2px solid {color}; outline-offset: 2px; } en :active { transform: scale(0.97); } toe aan het .btn-ruleset.
Ja. Gebruik verschillende klassenamen (bijv. .btn-primary, .btn-outlined) en genereer voor elk aparte CSS.