CSS-lab · Knoppen
Fill-up knop met golf
Een knop met een golvend laagje acid lime onderin dat bij hover in een vloeiende beweging de hele knop vult. Twee golven, pure CSS.
- Gemiddeld
- Pure CSS
- MIT-licentie
::before/::afterborder-radiusaspect-ratio@keyframes rotateisolation
<button type="button" class="fu-btn">Vul je agenda</button>/* Fill-up knop met golf - prefix .fu- */
.fu-btn {
--ink: #0C0C0D;
--paper: #F9F8F6;
--fill: #C6FF3D;
--fill-2: rgba(46, 91, 255, 0.35);
--rest: 14px;
--speed: 0.8s;
--spin: 6s;
position: relative;
isolation: isolate;
overflow: hidden;
padding: 22px 44px;
font: 900 1.05rem/1 "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink);
background: var(--paper);
border: 3px solid var(--ink);
border-radius: 16px;
cursor: pointer;
transition: transform 0.25s ease-out;
}
/* Twee draaiende vlakken met golvende bovenrand */
.fu-btn::before,
.fu-btn::after {
content: "";
position: absolute;
left: -50%;
top: calc(100% - var(--rest));
width: 200%;
aspect-ratio: 1;
border-radius: 42%;
background: var(--fill);
animation: fu-spin var(--spin) linear infinite;
transition: top var(--speed) cubic-bezier(0.6, 0, 0.2, 1);
}
/* Voorste golf */
.fu-btn::before {
z-index: -1;
}
/* Achterste golf: andere vorm, richting en snelheid */
.fu-btn::after {
z-index: -2;
top: calc(100% - var(--rest) - 6px);
border-radius: 38%;
background: var(--fill-2);
animation-duration: calc(var(--spin) * 1.6);
animation-direction: reverse;
}
/* Hover en focus: het water stijgt */
.fu-btn:hover,
.fu-btn:focus-visible {
transform: translateY(-2px);
}
.fu-btn:hover::before,
.fu-btn:focus-visible::before {
top: -60%;
}
.fu-btn:hover::after,
.fu-btn:focus-visible::after {
top: -75%;
}
.fu-btn:focus-visible {
outline: 3px solid #2E5BFF;
outline-offset: 4px;
}
@keyframes fu-spin {
to {
transform: rotate(1turn);
}
}
@media (prefers-reduced-motion: reduce) {
.fu-btn,
.fu-btn::before,
.fu-btn::after {
animation: none;
transition-duration: 0.2s;
}
.fu-btn:hover,
.fu-btn:focus-visible {
transform: none;
}
}Wat het is en waar je het gebruikt
Bij deze knop klotst onderin al een dun laagje acid lime, met daarachter een tweede, blauwige golf. Beweeg je eroverheen, dan stijgt het water: de golven lopen in een vloeiende beweging omhoog tot de hele knop gevuld is. Omdat de golven ook in rust bewegen, oogt de knop levendig zonder dat hij schreeuwt.
Het effect past bij speelse merken, duurzaamheid- of drankenthema’s, aanmeldformulieren en overal waar een actie iets mag ‘vullen’, zoals een donatie of een inschrijving. Op een lichte achtergrond met een dikke zwarte rand houdt het ook een stevig, grafisch karakter.
Zo werkt het
- De golven zijn de pseudo-elementen
::beforeen::after: grote vierkanten (width: 200%enaspect-ratio: 1) met eenborder-radiusvan rond de 40%. Zo’n bijna-ronde vorm heeft een licht golvende rand. - De keyframes
fu-spinlaten de vlakken continu draaien. Omdat alleen de bovenrand in de knop zichtbaar is, zie je geen draaiend vlak maar een golvend wateroppervlak. - In rust staan de vlakken met
top: calc(100% - var(--rest))bijna helemaal onder de knop. Bij:hoveren:focus-visiblegaattopnaar een negatieve waarde en stijgt het water. - De achterste golf draait de andere kant op (
animation-direction: reverse), met een andere snelheid en een iets andere afronding. Daardoor lopen de golven nooit gelijk en voelt het water natuurlijk. overflow: hiddenknipt alles buiten de knop weg enisolation: isolatehoudt de negatievez-indexvan de golven binnen de knop, achter het label.
Aanpassen
Op .fu-btn stel je met --fill de kleur van de voorste golf in en met --fill-2 die van de achterste. --rest bepaalt hoe hoog het water in rust staat. Zet die op 0px als de knop in rust leeg moet zijn. --speed is de duur van het vullen en --spin de rotatietijd van de golven. Een hogere waarde geeft rustiger water. Met --ink en --paper pas je rand, tekst en achtergrond aan.
Toegankelijkheid en browsersupport
Het is een echte <button> met tekst die altijd boven de golven ligt. Zwart op acid lime en zwart op off-white hebben allebei een hoog contrast. Toetsenbordgebruikers krijgen het vul-effect ook bij focus, plus een cobaltblauwe outline. In het prefers-reduced-motion-blok stoppen de draaiende golven en wordt het vullen een korte, rustige overgang. aspect-ratio werkt in alle actuele browsers. In heel oude browsers zonder ondersteuning wordt de golf platter, maar de knop blijft bruikbaar.
Verder lezen
Lees in ons artikel over microinteracties hoe je zulke kleine bewegingen doelgericht inzet. Of bekijk hoe we interactief webdesign met animaties aanpakken.
Meer knoppen