Naar inhoud
FFrosthaven Lab

01 — 18 varianten

Buttons

Van rustige primaire knop tot magnetische cursor-volger. De hover-state is het goedkoopste plekje om een site duur te laten voelen.

Shimmer sweep

csshover

Lichtstreep die over de knop veegt. Werkt het beste op één primaire CTA per scherm; op elke knop wordt het rumoerig.

Border beam

cssconic

Roterende lichtpunt langs de rand. Sterk om één abonnement of pakket in een pricing-tabel te markeren.

Magnetic

jscursor

De knop trekt naar de cursor toe. Duur gevoel, maar alleen op desktop; op touch gebeurt er niets, dus houd de knop ook zonder effect duidelijk.

Liquid fill

csshover

Kleurvlak dat van onder naar boven vult. Rustig genoeg voor secundaire knoppen door de hele pagina heen.

Glow halo

cssblur

Vervaagde kopie van de knop eronder als lichtkrans. Werkt uitsluitend op donkere achtergronden.

Ripple on click

jsfeedback

Materiaal-achtige klik-echo. Vooral waardevol op mobiel, waar hover niet bestaat en je toch bevestiging wilt geven.

Rainbow conic

cssconic

Volledig draaiend kleurenwiel achter de knop. Past bij tech, creatief en horeca; te luid voor advocaten of installateurs.

Icon slide

csshover

Pijl schuift naar rechts, tekst schuift mee. De veiligste keuze voor tekstlinks en secundaire acties.

Text scramble

jshover

Letters vallen op hun plaats bij hover. Sterke signatuur voor studio's en tech; onbruikbaar als de knoptekst belangrijk is voor screenreaders zonder aria-label.

3D press

csshover

Harde schaduw die wegvalt bij indrukken. Past bij speelse, tactiele merken: bakkers, kinderopvang, ijssalons.

Neon outline

csshover

Gloeiende rand en tekstschaduw. Nachtclub, gaming, barbershop. Let op contrast: neon op donker haalt vaak net geen AA.

Outline draw

svghover

De rand tekent zichzelf bij hover via stroke-dashoffset. Verfijnd, past bij architecten en interieur.

Expand arrow

csshover

Cirkel groeit uit tot volledige knop met label. Elegant in een hero waar ruimte schaars is.

Stateful (loading → done)

jsform

Verplicht bij elk contactformulier. Zonder deze state klikt de bezoeker drie keer en krijg je drie aanvragen binnen.

Split hover

csshover

Twee labels boven elkaar die verticaal wisselen. Handig om een tweede boodschap kwijt te kunnen ('Bel ons' → '+34 600 …').

Glass

cssglass

Halftransparant met backdrop-blur. Alleen bruikbaar bovenop een foto of gradient; op een egale achtergrond verdwijnt het effect.

Segmented pill

jsstate

Schuivende indicator tussen twee of drie opties. Gebruikt voor prijs maand/jaar, particulier/zakelijk, of taalkeuze.

Pulsating CTA

cssattention

Uitdijende ring die aandacht trekt. Reserveren voor de zwevende WhatsApp- of belknop; in de content-flow is het opdringerig.