Button mit gezeichnetem Rahmen
Beim Hover werden die vier Seiten des Rahmens nacheinander gezogen, wie mit einem Stift.
Einstellungen
Code
<button class="uv-draw"><b></b><b></b><b></b><b></b>Entdecken</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
Dieser Button mit gezeichnetem Rahmen hat etwas Redaktionelles. Er passt zu „Projekte ansehen“ bei einem Architekturbüro, zu „Zur Kollektion“ in einem Mode-Lookbook oder zum Kontakt-Button einer Fotografen-Website. Die Linien umrunden das Rechteck Seite für Seite, sodass der Hover eher wie eine kleine Zeichnung wirkt als wie ein Aufblitzen.
Eine volle Runde dauert fast eine Sekunde, wer schnell mit der Maus ist, sieht nur die Hälfte. Stört dich das, erhöh die Geschwindigkeit. In minimalistischen Layouts mit feinen Linien und viel Weißraum macht er sich besser als auf bunten, vollen Seiten.