CSS button hover effect en knoppen ontwerpen
Met deze online tool ontwerp je direct knoppen voor jouw website en voeg je eenvoudig een css button hover effect toe. Pas kleuren, opvulling en afgeronde hoeken aan en bekijk het resultaat live. Zodra de knop er goed uitziet, kopieer je de schone HTML en CSS of Tailwind-classes rechtstreeks naar je klembord.
Een HTML knop maken met CSS
Een knop ontwerpen en de bijbehorende code kopiëren werkt in enkele eenvoudige stappen:
- Stel de gewenste kleuren in via Achtergrondkleur en Tekstkleur.
- Pas de ruimte rondom de tekst aan met Opvulling X voor de zijkanten en Opvulling Y voor de boven- en onderkant.
- Bepaal de vorm van de hoeken met de schuifregelaar Hoekradius.
- Kies optioneel een animatie onder Hover-effect.
- Klik op Kopiëren naar klembord om de HTML-tag en CSS-regel te kopiëren.
CSS button hover effects instellen
Met het menu Hover-effect voeg je een micro-animatie toe voor wanneer iemand de muisaanwijzer boven de knop houdt. Met Vergroten wordt de knop 5% groter. Met Omhoog beweegt de knop 2px naar boven en krijgt deze een zachte schaduw.
De optie Gloed geeft een halo in de gekozen achtergrondkleur, terwijl Omtrek een subtiele rand buiten de knop plaatst. Kies Geen voor een statische knop. Onder Meer opties stel je de overgangssnelheid in op snel (150 ms), normaal (300 ms) of traag (500 ms).
CSS button border radius voor afgeronde hoeken
Met de schuifregelaar Hoekradius pas je de ronding van de hoeken aan van 0 tot 100 pixels. Een waarde van 0px levert strakke, rechte hoeken op, terwijl een waarde rond 8px zorgt voor subtiel afgeronde hoeken.
Wanneer de hoekradius ten minste de helft van de knophoogte bedraagt, ontstaat een pilvorm. Bij de standaard opvulling bereik je dit effect vanaf ongeveer 24px. In de CSS-code wordt dit geëxporteerd als de eigenschap border-radius.
Tailwind CSS en pictogrammen toevoegen
Via Meer opties wijzig je het Uitvoerformaat van Standaard CSS naar Tailwind CSS. In de Tailwind-modus worden opvulling en hoekradius automatisch afgerond naar de dichtstbijzijnde schaalstappen, zoals px-6 py-3 rounded-lg. Hex-kleuren worden omgezet via willekeurige waarden zoals bg-[#2563eb].
Schakel Plaatshouderpictogram toevoegen in om een SVG-pijl naast de tekst te plaatsen. De gegenereerde code gebruikt Flexbox met display: inline-flex en een afstand van 8px om het pictogram en de tekst netjes uit te lijnen.
Veelgestelde vragen
Hoe maak ik een knop met HTML en CSS?
Kies een achtergrondkleur en tekstkleur, stel de horizontale en verticale opvulling in en pas de hoekradius aan. Klik vervolgens op "Kopiëren naar klembord". Je krijgt een HTML-button met een CSS-regel die je direct in je project kunt plakken.
Hoe voeg ik een CSS button hover effect toe?
Kies een animatie uit het menu "Hover-effect", zoals "Vergroten", "Omhoog", "Gloed" of "Omtrek". Onder "Meer opties" kun je de overgangssnelheid instellen op snel (150 ms), normaal (300 ms) of traag (500 ms).
Hoe maak ik afgeronde hoeken met CSS button border radius?
Verhoog de schuifregelaar "Hoekradius". In Standaard CSS wordt dit genoteerd als border-radius in pixels, waarbij een waarde vanaf circa 24px een pilvorm oplevert bij standaard opvulling. In Tailwind CSS wordt dit vanaf 40px omgezet naar rounded-full.
Kan ik met deze tool Tailwind CSS-classes genereren?
Ja, open "Meer opties" en verander "Uitvoerformaat" naar "Tailwind CSS". De opvulling en hoekradius worden automatisch afgerond op de dichtstbijzijnde Tailwind-schaal en kleuren worden weergegeven via willekeurige hex-waarden zoals bg-[#2563eb].
Hoe voeg ik een pictogram toe aan een knop?
Vink "Plaatshouderpictogram toevoegen" aan onder "Meer opties". De gegenereerde code bevat een inline SVG-pijl en Flexbox-regels met een afstand van 8px tussen het pictogram en de tekst.
Hoe bekijk ik de hover-preview van een knop op een mobiel touchscreen?
Houd de knop in het voorbeeldvak op je mobiele telefoon lang ingedrukt. Omdat touchscreens geen muisaanwijzer kennen, simuleert lang drukken de hover-status in het voorbeeld.
Is deze online tool gratis en worden mijn gegevens opgeslagen?
De tool is gratis en vereist geen account. Alle code en voorbeelden worden lokaal in je browser gegenereerd, waardoor er geen gegevens naar een server worden gestuurd.
Aanbevolen
-
Don't Make Me Think, Revisited (Steve Krug)Begrijp waarom gebruikers klikken in deze klassieker over UI-design.
-
Datacolor Spyder SchermcalibratorBekijk je knopkleuren zoals ze echt zijn, onafhankelijk van je monitor.
-
Logitech MX Master 3S Draadloze MuisNauwkeurige en stille kliks voor het perfect afstellen van padding en hoeken.
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
