HTML + CSSButtons
Kreis wird zur Pille
Ein runder Pfeil neben dem Text wächst, bis er den ganzen Button mit Farbe umschließt.
Einstellungen
16px
1x
Code
<button class="uv-cpl"><span class="oder"></span><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span><span class="t">Lass uns reden</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
Alle ansehen: ButtonsWofür du ihn nutzen kannst
Agentur- und Portfolio-Websites lieben dieses Muster, weil es in Ruhe zurückhaltend bleibt, nur ein farbiger Kreis mit Pfeil neben einem Wort, und bei Interesse sofort zu einem vollständigen Call to Action wird. Der Kreis dehnt sich mit weicher Federung, der Pfeil wandert ans andere Ende und der Text rückt weiß in die Mitte.
Am besten mit ein oder zwei Wörtern wie Kontakt, Lass uns reden oder Projekte ansehen. Der Tastaturfokus löst dieselbe Erweiterung aus, beim Durchtabben sieht man also genau, welche Aktion aktiv ist.