Button mit Klick-Welle
Eine weiche Welle breitet sich genau von der Stelle aus, an der du klickst oder tippst.
Einstellungen
Code
<button class="uv-ripple">Klick mich</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
Der Ripple-Effekt gibt sofort Rückmeldung beim Drücken, und das zählt in Web-Apps, die man mit dem Daumen bedient: „In den Warenkorb“ bei einem Lieferdienst, „Speichern“ in einer Notiz-App oder die Filter in einem Buchungs-Dashboard. Wer Material Design kennt, erkennt die Klick-Welle sofort wieder. Dafür braucht es ein paar Zeilen JavaScript.
Anders als Hover-Effekte funktioniert er auf dem Handy genauso gut, weil er auf das Tippen selbst reagiert. Bei sehr hellen Buttonfarben sieht man die weiße Welle kaum, nimm also einen mittleren oder dunklen Ton. Langsamer eingestellt wirkt er hochwertiger.