CSS-lab · Knoppen
Sticker-knop met tilt
Een ronde sticker-CTA met tekst op een cirkelpad die langzaam ronddraait en bij hover speels kantelt. Inline SVG, verder pure CSS.
- Gemiddeld
- Pure CSS
- MIT-licentie
SVG textPathtextLength@keyframes rotatetransformcubic-bezier
<a href="#" class="sk-sticker" aria-label="Start een project">
<svg class="sk-ring" viewBox="0 0 200 200" aria-hidden="true" focusable="false">
<defs>
<path id="sk-circle" d="M100,100 m-74,0 a74,74 0 1,1 148,0 a74,74 0 1,1 -148,0"/>
</defs>
<text>
<textPath href="#sk-circle" textLength="462" lengthAdjust="spacing">START EEN PROJECT ✦ START EEN PROJECT ✦</textPath>
</text>
</svg>
<span class="sk-core" aria-hidden="true">↗</span>
</a>/* Sticker-knop met tilt - prefix .sk- */
.sk-sticker {
--size: 190px;
--bg: #0C0C0D;
--ink: #C6FF3D;
--edge: #F9F8F6;
--spin: 14s;
--tilt: -14deg;
position: relative;
display: grid;
place-items: center;
width: var(--size);
aspect-ratio: 1;
border: 6px solid var(--edge);
border-radius: 50%;
color: var(--ink);
background: var(--bg);
text-decoration: none;
/* Harde sticker-schaduw */
box-shadow: 6px 8px 0 var(--bg);
transform: rotate(-6deg);
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Tekstring: draait continu */
.sk-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: sk-spin var(--spin) linear infinite;
}
.sk-ring text {
fill: currentColor;
font: 700 15px ui-monospace, Menlo, Consolas, monospace;
letter-spacing: 0.12em;
}
/* Kern met pijl */
.sk-core {
display: grid;
place-items: center;
width: 40%;
aspect-ratio: 1;
border-radius: 50%;
font: 900 2rem/1 system-ui, sans-serif;
color: var(--bg);
background: var(--ink);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Hover en focus: kantelen en optillen */
.sk-sticker:hover,
.sk-sticker:focus-visible {
transform: rotate(var(--tilt)) scale(1.06) translate(-3px, -3px);
box-shadow: 12px 14px 0 var(--bg);
}
.sk-sticker:hover .sk-core,
.sk-sticker:focus-visible .sk-core {
transform: rotate(45deg);
}
.sk-sticker:focus-visible {
outline: 3px solid var(--bg);
outline-offset: 8px;
}
@keyframes sk-spin {
to {
transform: rotate(1turn);
}
}
@media (prefers-reduced-motion: reduce) {
.sk-ring {
animation: none;
}
.sk-sticker,
.sk-core {
transition-duration: 0.15s;
transition-timing-function: ease-out;
}
}Wat het is en waar je het gebruikt
De sticker-knop lijkt op een ronde sticker die net op de pagina is geplakt: een zwarte schijf met een witte snijrand, een harde schaduw en tekst die langzaam langs de rand rondloopt. In het midden zit een acid-lime knop met een pijl. Beweeg je eroverheen, dan kantelt de sticker, komt hij iets naar je toe en draait de pijl mee.
Zo’n ronde CTA past goed in een hero naast een grote kop, als zwevende ‘neem contact op’-knop in een hoek of bij portfolio- en campagnepagina’s met een speels randje. Omdat de tekst altijd draait, trekt hij ook zonder hover de aandacht.
Zo werkt het
- De tekst staat in een inline
<svg>op een cirkelvormig pad. Het pad is getekend met twee boogjes (a74,74) en de<textPath>verwijst ernaar methref="#sk-circle". - Met
textLengthenlengthAdjust="spacing"verdeelt de browser de letters precies over de omtrek, zodat het begin en het einde mooi aansluiten. - De hele SVG draait met de keyframes
sk-spin(rotate(1turn), lineair, oneindig). - De sticker zelf heeft een witte
borderals snijrand en een hardebox-shadowzonder blur. Bij:hoveren:focus-visiblecombineerttransformeenrotate(),scale()en kleinetranslate(). Een overshootingcubic-beziergeeft de beweging een veerkrachtige stuit. - De kern in het midden is een cirkel met
display: gridenplace-items: center. De pijl draait daarin een kwartslag mee.
Aanpassen
Op .sk-sticker stel je met --size de diameter in. Alles schaalt mee, omdat de SVG een viewBox heeft. --bg is de kleur van de schijf, --ink die van de ringtekst en de kern, en --edge de snijrand. --spin is de tijd voor één omwenteling en --tilt de kanteling bij hover. Andere tekst zet je direct in de <textPath>. Houd hem ongeveer even lang, of pas textLength aan.
Toegankelijkheid en browsersupport
De sticker is een echte <a>. Omdat de draaiende tekst voor schermlezers lastig is, krijgt de link een aria-label en zijn de SVG en de pijl verborgen met aria-hidden="true". Focus geeft een ronde outline op ruime afstand en hetzelfde kanteleffect als hover. De lime tekst op de zwarte schijf heeft een zeer hoog contrast. In het prefers-reduced-motion-blok stopt het ronddraaien en wordt de kanteling een korte, vlakke overgang. SVG textPath werkt in alle actuele browsers. De letterverdeling kan per browser een fractie verschillen.
Verder lezen
Meer over opvallende CTA’s lees je in hero-secties die converteren. Wil je zulke speelse details in je site? Bekijk wat we doen op het gebied van webdesign.
Meer knoppen