Knopstijl instellen

⏰ 5 min.

Kadence maakt het mogelijk om knoppen globaal te stylen, zodat alle knoppen op je website dezelfde uitstraling hebben.

  • Ga naar Customizer > Kleuren & lettertypen > Knoppen.
  • Hier kun je alle globale stijlen aanpassen, zodat je niet elke knop afzonderlijk hoeft te bewerken.

Achtergrond- en tekstkleur aanpassen

  • Kies een achtergrondkleur voor je knoppen.
  • Stel een tekstkleur in die goed leesbaar is.
  • Voeg een hover-kleur toe zodat de knop van kleur verandert wanneer iemand eroverheen gaat.
  • Voor een transparante achtergrond, schuif de regelaar helemaal tot links (0).

Randdikte en hoeken aanpassen

  • Randdikte toevoegen: wil je een dikkere of dunnere rand? Pas de dikte hier aan. Ook de stijl pas je hier aan: doorlopende lijn, stippellijn, streepjes,…
  • Afgeronde of rechte hoeken: gebruik een kleine afronding of rechte hoeken, naargelang jouw branding.
  • Randkleuren instellen: pas de randkleur aan om contrast of subtiliteit toe te voegen. Vergeet de hover-kleur niet.

Padding (ruimte binnen de knop) instellen

  • Kadence biedt de optie om padding in EM te gebruiken in plaats van pixels, dit zorgt ervoor dat de ruimte rondom de tekst zich aanpast naar de lettergrootte van de knoptekst. Zo zijn ze beter schaalbaar op verschillende schermformaten.
  • Pas de horizontale en verticale padding aan voor de gewenste grootte, doorgaans is rechts/links het dubbele van boven/onder, voor een gebalanceerde look.

Lettertype en stijl aanpassen

  • Laat het lettertype op Inherit (overerven) staan als het lettertype niet hoeft te veranderen.
  • Pas de lettergrootte, dikte en stijl aan, ook hier kun je REM gebruiken voor je letters.
  • Zet de tekst in hoofdletters of normale tekst, afhankelijk van je voorkeur.
  • Kadence biedt een optie om de lettergrootte per apparaat aan te passen.

Schaduw en diepte toevoegen

Wil je dat je knoppen meer opvallen? Voeg een schaduw toe voor een 3D-effect:

  • Pas de intensiteit van de schaduw aan.
  • Kies een kleur voor de schaduw, bij voorkeur een subtiele donkere tint.

Verdere verfijning en kleurverlopen

  • Experimenteer met kleine aanpassingen om je knoppen perfect te laten aansluiten op je branding.
  • Gebruik een kleurverloop (gradient) als achtergrond, dit kan een mooi subtiel effect creëren. Kadence laat je eenvoudig een begin- en eindkleur kiezen voor een leuk effect.