HTML + CSSFilter

Button „Filter zurücksetzen“

Ein Button, der erst erscheint, wenn ein Filter aktiv ist, die Anzahl zeigt und alles mit einem Klick zurücksetzt.

Einstellungen

16px
1x

Code

<div class="uv-fcr"><div class="rw"><button class="c">Design</button><button class="c">Code</button><button class="c">Fotos</button><button class="c">Video</button></div><button class="cl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg><b>Filter zurücksetzen</b><i class="n">0</i></button></div>

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 Filter

Wofür du ihn nutzen kannst

In einer Bilddatenbank stapeln Leute Filter schnell übereinander: Illustration, Vektor, Foto, Video. Wenn keine Treffer mehr kommen, brauchen sie einen schnellen Ausweg. Dieser Button bleibt verborgen, bis es etwas zurückzusetzen gibt, und gleitet dann samt Zähler herein. So steht kein nutzloser Button auf einer Seite ohne Filter. Gesucht als Reset-Button für Filter.

Setz ihn direkt zu den Filtern, nicht ans andere Ende der Seite. Die Zahl ist wichtig: „Filter zurücksetzen (3)“ sagt, wie viel man gleich rückgängig macht. Kombiniere ihn mit einer Leermeldung, die bei null Treffern das Zurücksetzen vorschlägt.