CSS-lab · Knoppen
Roterende gradient-rand
Een donkere knop met een rand van sunset-violet, cobalt en acid lime die continu rond blijft draaien. Werkt zonder @property.
- Gemiddeld
- Pure CSS
- MIT-licentie
conic-gradient::before/::after@keyframes rotateaspect-ratioisolation
<button type="button" class="gb-btn">Ontdek het lab</button>/* Roterende gradient-rand - prefix .gb- */
.gb-btn {
--c1: #9B5CFF;
--c2: #2E5BFF;
--c3: #C6FF3D;
--bg: #0C0C0D;
--ink: #F9F8F6;
--border: 2px;
--radius: 14px;
--speed: 4s;
position: relative;
isolation: isolate;
overflow: hidden;
padding: 20px 42px;
font: 600 1.05rem/1 system-ui, sans-serif;
letter-spacing: 0.02em;
color: var(--ink);
background: var(--bg);
border: 0;
border-radius: var(--radius);
cursor: pointer;
}
/* Groot draaiend vlak met de conic-gradient */
.gb-btn::before {
content: "";
position: absolute;
z-index: -2;
top: 50%;
left: 50%;
width: 200%;
aspect-ratio: 1;
background: conic-gradient(var(--c1), var(--c2), var(--c3), var(--c1));
transform: translate(-50%, -50%) rotate(0turn);
animation: gb-spin var(--speed) linear infinite;
}
/* Masker: laat alleen de rand zien */
.gb-btn::after {
content: "";
position: absolute;
z-index: -1;
inset: var(--border);
border-radius: calc(var(--radius) - var(--border));
background: var(--bg);
transition: opacity 0.35s ease;
}
/* Hover: gradient schijnt door */
.gb-btn:hover::after {
opacity: 0.82;
}
.gb-btn:focus-visible {
outline: 2px solid var(--c3);
outline-offset: 4px;
}
@keyframes gb-spin {
to {
transform: translate(-50%, -50%) rotate(1turn);
}
}
@media (prefers-reduced-motion: reduce) {
.gb-btn::before {
animation: none;
}
.gb-btn::after {
transition: none;
}
}Wat het is en waar je het gebruikt
Deze knop heeft een rand die nooit stilstaat. Een conic-gradient van sunset violet via cobalt naar acid lime draait rustig rond de knop, alsof er licht langs de rand loopt. Bij hover wordt de binnenkant iets doorschijnend, zodat de kleuren erdoorheen gloeien en de knop oplicht.
Je gebruikt hem als blikvanger in een donkere hero, voor een lancering of aanmelding, of als ‘nieuw’-actie in een dashboard. Omdat de beweging continu is, valt de knop ook op zonder dat iemand eroverheen beweegt.
Zo werkt het
- Een draaiende rand maak je meestal door de hoek van een
conic-gradientte animeren via@property. Dat werkt niet in elke context, onder andere niet in shadow DOM. Daarom draait hier niet de gradient maar het element zelf. .gb-btn::beforeis een groot vierkant (width: 200%,aspect-ratio: 1) met eenconic-gradient, gecentreerd mettranslate(-50%, -50%). De keyframesgb-spinroteren het metrotate(1turn)..gb-btn::afterligt daarboven metinset: var(--border)en de achtergrondkleur. Het werkt als masker: alleen een smalle rand van de draaiende gradient blijft zichtbaar.overflow: hiddenenborder-radiusop de knop knippen het vierkant af.isolation: isolatehoudt de negatievez-indexvan beide lagen binnen de knop, onder het label.- Bij
:hoverwordt het masker iets transparanter, zodat de gradient zacht door de knop heen schijnt.
Aanpassen
Op .gb-btn stel je met --c1, --c2 en --c3 de drie kleuren van de rand in. --bg is de binnenkleur van de knop en --ink de tekstkleur. Met --border bepaal je de dikte van de rand en met --radius de afronding. Het masker rekent zijn eigen radius automatisch uit. --speed is de tijd voor één volledige omwenteling. Wil je een ‘komeet’ in plaats van een volle regenboog, zet dan een paar stops in de gradient op transparent.
Toegankelijkheid en browsersupport
Het is een echte <button> met off-white tekst op bijna-zwart, dus het contrast is hoog. Ook bij de doorschijnende hover blijft het label goed leesbaar. Focus krijgt een outline in acid lime. Met prefers-reduced-motion stopt de rotatie en blijft er een statische, kleurrijke rand over. Omdat de truc met een geroteerd pseudo-element werkt in plaats van met @property, draait de rand in alle actuele versies van Chrome, Edge, Firefox en Safari.
Verder lezen
Meer knoppen met karakter vind je in ons artikel over CSS-knoppen en hover-effecten. Wil je bewegende details in je eigen site? Bekijk onze aanpak voor interactief webdesign en animaties.
Meer knoppen