1<button>2 <span class="inner">Premium holen</span>3</button>4
5<style>6 button{position:relative;overflow:hidden;padding:2px;border:0;border-radius:16px;cursor:pointer;background:#0d0d16;isolation:isolate}7 button::before{content:"";position:absolute;inset:-60%;z-index:0;8 background:conic-gradient(#8b5cf6,#d946ef,#06b6d4,#8b5cf6);animation:spin 3s linear infinite}9 .inner{position:relative;z-index:1;display:block;padding:13px 30px;border-radius:14px;background:#0d0d16;color:#fff;font:600 15px system-ui;transition:background .2s}10 button:hover .inner{background:#17172333}11 @keyframes spin{to{transform:rotate(360deg)}}12</style>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Ein Button mit rotierendem Verlaufsrahmen aus Violett, Fuchsia und Cyan, der durch die kontinuierliche Drehung Aufmerksamkeit erzeugt und wichtige Call-to-Actions hervorhebt.