Code: Custom hover kleurovergang met thema-variabelen

Samenvatting

Wil je dat knoppen op je website soepel van kleur veranderen als je er met de muis overheen gaat? Met een klein stukje code laat je de kleur vloeiend overlopen — bijvoorbeeld van je hoofdkleur naar een iets donkerdere tint. Dat geeft je website een verzorgde, professionele uitstraling.

Voordat je begint: twee belangrijke dingen

1. Knoppen heten button-1 t/m button-6 (niet .btn).
Mach3Blocks heeft geen algemene knop-class zoals .btn. Elke knopstijl heeft een eigen class:

button-1 en button-2 zijn gevulde knoppen (met een achtergrondkleur) — hierop kun je een achtergrond-kleurovergang maken.
button-3 en button-4 zijn omlijnde knoppen (rand + tekstkleur).
button-5 en button-6 zijn tekstknoppen (alleen tekstkleur).

Elke knop heeft daarnaast een kleurmodus-class: light of dark. De volledige class is dus bijvoorbeeld button-1 dark.

2. Het LESS-veld en het Head-veld werken anders.

In een LESS-veld (per blok of website-breed) kun je de kleurvariabelen van je thema gebruiken, zoals @color-primary-500. LESS-functies zoals darken() werken hier.
In het Head-veld plak je gewone (rauwe) CSS. Daar werken de thema-variabelen en darken() niet — gebruik daar een concrete kleur of de CSS-functie filter: brightness().

Let op: de variabelen die je in de CMS-beheeromgeving ziet (zoals var(--color-primary)) bestaan niet op je gepubliceerde website. Gebruik op de website altijd de thema-variabelen in LESS-vorm, zoals @color-primary-500, en alleen in een LESS-veld.

Optie 1: Per blok (aanbevolen, via LESS)

Zo laat je de gevulde knoppen in één blok soepel donkerder worden bij hover:

Selecteer het blok in de editor
Klik op het </>-icoon → tabblad LESS

Plak dit:

 .button-1 {
   transition: background-color 250ms ease;

   &.light:hover,
   &.dark:hover {
     background-color: @color-primary-600; // een tint donkerder dan de hoofdkleur
   }
 }

@color-primary-500 is je hoofdkleur; @color-primary-600 is een tint donkerder. Wil je zelf bepalen hóe veel donkerder, dan kan dat ook met een LESS-functie: darken(@color-primary-500, 15%).

Let op: voor de hoofd- en accentkleur bestaan alleen de tinten 400, 500 en 600. @color-primary-700 bestaat niet en geeft een foutmelding bij het opslaan.

Optie 2: Website-breed (via het Head-veld, rauwe CSS)

Wil je het effect op álle knoppen van je hele website? Zet het in het Head-veld. Let op: dit is gewone CSS, dus de thema-variabelen werken hier niet.

Ga naar Website-instellingen → Code bewerken → veld Head

Plak dit:

 <style>
   /* Alle gevulde knoppen langzaam donkerder bij hover */
   .button-1:hover,
   .button-2:hover {
     filter: brightness(0.85); /* maakt de knop donkerder, ongeacht de kleur */
     transition: filter 250ms ease;
   }
 </style>

filter: brightness(0.85) maakt de knop donkerder zonder dat je de exacte kleurcode hoeft te weten — handig, want zo blijft het werken als je later je themakleur wijzigt. Wil je per se een specifieke kleur? Vervang die regel dan door background-color: #jouwhexcode;.

Welke variabelen kun je in een LESS-veld gebruiken?

De belangrijkste thema-variabelen:

Kleuren: @color-primary-400/500/600, @color-secondary-400/500/600, @color-neutral-050 t/m @color-neutral-900, @color-white, @color-black, en voor statussen @color-success-500/700 en @color-danger-500/700.
Lettertype: @font-family-heading, @font-family-text, enzovoort.
Ruimte: @block-spacing, @container-width, @element-spacing, enzovoort.

Veelgestelde vragen

Mijn hover-effect werkt niet — wat kan er mis zijn?
Controleer eerst of je de juiste class gebruikt (button-1 t/m button-6, niet .btn). Twijfel je welke knop welke class heeft? Klik met de rechtermuisknop op de knop op je live pagina en kies "Inspecteren" om de class te zien.

Ik krijg een foutmelding bij het opslaan van mijn LESS.
Grote kans dat je een tint gebruikt die niet bestaat, zoals @color-primary-700. Gebruik voor de hoofd- en accentkleur alleen 400, 500 of 600.

Waarom werkt darken() niet in mijn Head-code?
Het Head-veld is gewone CSS, geen LESS. darken() en de @color-…-variabelen werken alleen in een LESS-veld. Gebruik in het Head-veld filter: brightness() of een vaste kleurcode.

De overgang werkt bij hover, maar niet als ik de muis weghaal.
Zet de transition-regel op de knop zelf (.button-1), niet alleen op :hover. Zo verloopt ook de terugweg soepel.