HTML + CSSButtons

Rotierender Verlaufsrand

Ein zweifarbiger Verlauf wandert ununterbrochen um den Rand des Buttons, auch ohne Hover.

Einstellungen

16px
1x

Code

<button class="uv-conic"><span>Entdecken</span></button>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Buttons

Wofür du ihn nutzen kannst

Ein Button mit animiertem Gradient-Rand zieht Blicke auf sich, ohne dass jemand ihn berührt. Deshalb passt er gut zu Launch-Momenten: „Auf die Warteliste“ auf einer Vorab-Seite, „Tickets sichern“ für eine Konferenz oder „Beta testen“ im Changelog einer App. Innen bleibt er in der Farbe deiner Seite, nur die Kontur bewegt sich.

Weil er nie stillsteht, gehört er auf genau ein Element. Steht er neben Fließtext, dreh die Geschwindigkeit runter. Zwei ähnliche Farbtöne wirken ruhig, zwei gegensätzliche auf dunklem Hintergrund deutlich auffälliger.