Hover

Ein farbiger Hintergrund wischt von einer Kante herein und schwingt elastisch leicht über.

Füge bei [wo] einen „Background Bounce Sweep“-Hover-Effekt hinzu.
Eine neue Hintergrundfarbe soll von einer Kante hereinwischen, mit elastischem Nachfedern leicht über die gegenüberliegende Kante hinausschießen und sich dann setzen, während die Textfarbe wechselt, damit alles lesbar bleibt; beim Verlassen gleitet sie sanft wieder hinaus.
Halte den Text über der Füllung und zeige denselben Effekt beim Tastaturfokus.

Hintergrund- und Textfarbe blenden beim Hovern weich in eine neue Farbe über.

Füge bei [wo] einen „Background Fade“-Hover-Effekt hinzu (auch color fade genannt).
Hintergrund- und Textfarbe sollen weich in neue Farben überblenden, solange der Zeiger über dem Element ist, und beim Verlassen zurückblenden: ruhig, ohne Bewegung.
Achte in beiden Zuständen auf genug Kontrast zwischen Text und Hintergrund und zeige denselben Effekt beim Tastaturfokus.

Ein farbiger Hintergrund wischt beim Hovern von einer Kante aus über das Element.

Füge bei [wo] einen „Background Sweep“-Hover-Effekt hinzu (auch background fill oder slide fill genannt).
Eine neue Hintergrundfarbe soll von der linken zur rechten Kante darüberwischen, weich und schnell, ohne Nachfedern, und sich beim Verlassen genauso zurückziehen, während die Textfarbe wechselt, damit alles lesbar bleibt.
Beschneide die Füllung auf die Form des Elements und zeige denselben Effekt beim Tastaturfokus.

Das Element schwebt nach oben und wippt dann beim Hovern fortlaufend auf und ab.

Füge bei [wo] einen „Bob“-Hover-Effekt hinzu (auch hang genannt).
Das Element soll ein Stück nach oben schweben und dann sanft auf und ab wippen, solange der Zeiger darüber bleibt, und beim Verlassen wieder absinken: langsam und weich.
Lass das Wippen nur beim Hovern laufen und halte das Element bei reduzierter Bewegung (prefers-reduced-motion) still.

Die Rahmenfarbe blendet beim Hovern ein oder wechselt weich.

Füge bei [wo] einen „Border Fade“-Hover-Effekt hinzu.
Der Rahmen soll weich von einem gedämpften Ton in die Akzentfarbe überblenden, solange der Zeiger über dem Element ist: dezent, ohne Bewegung oder Größenänderung.
Lass die Rahmenbreite in beiden Zuständen gleich, damit nichts verrutscht, und zeige denselben Effekt beim Tastaturfokus.

Konzentrische Rahmenringe breiten sich beim Hovern vom Element nach außen aus oder ziehen sich nach innen zusammen.

Füge bei [wo] einen „Border Ripple“-Hover-Effekt hinzu.
Wenn der Zeiger hineinfährt, sollen sich ein paar Rahmenringe nacheinander vom Element nach außen ausbreiten und verblassen: schnell und leicht, wie eine Welle im Wasser.
Spiel ihn einmal pro Hover ab statt in einer Schleife und lass die Ringe das umgebende Layout nicht verschieben.

Das Element skaliert mit elastischem Überschwingen, wenn das Hovern beginnt oder endet.

Füge bei [wo] einen „Bounce Scale“-Hover-Effekt hinzu (auch bounce in / out genannt).
Das Element soll sich federnd und sichtbar überschwingend etwas vergrößern, kurz über seine Endgröße hinausgehen und sich dann setzen, und beim Verlassen genauso zurückfedern.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Ein hervorgehobener Hintergrund gleitet in einem Raster zwischen den Karten und folgt der jeweils gehoverten Karte.

Füge bei [wo] einen „Card Hover Effect“ hinzu (auch sliding highlight card grid genannt).
Ein weicher, hervorgehobener Hintergrund soll hinter der gehoverten Karte erscheinen, fließend zur nächsten Karte gleiten, auf die der Zeiger wechselt, und ausblenden, wenn der Zeiger das Raster verlässt.
Lass den Tastaturfokus die Hervorhebung genauso bewegen und halte die Karten selbst an ihrem Platz.

Ein weiches radiales Licht folgt dem Zeiger über die Kartenoberfläche und lässt den Hintergrund darunter durchscheinen.

Füge bei [wo] einen „Card Spotlight“-Effekt hinzu (auch spotlight hover, pointer glow, mouse-following glow oder radial gradient hover genannt).
Ein weicher, schwacher radialer Schein soll dem Zeiger über die Kartenoberfläche folgen, beim Hineinfahren einblenden und beim Verlassen ausblenden.
Halte den Schein hinter dem Karteninhalt, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten einfach unbeleuchtet.

Eine Ecke des Elements klappt beim Hovern hoch wie eine Seite, die umgeblättert wird.

Füge bei [wo] einen „Curl“-Hover-Effekt hinzu (auch page curl genannt).
Eine Ecke des Elements soll sich weich hochklappen wie eine Seite beim Umblättern, dabei die Rückseite der Falte zeigen und beim Verlassen wieder flach werden.
Halte die Falte klein, damit sie keine wichtigen Inhalte verdeckt, und zeige denselben Effekt beim Tastaturfokus.

Ein Overlay gleitet von der Seite herein, über die der Zeiger kam, und verschwindet zur Seite, über die er geht.

Füge bei [wo] einen „Direction Aware Hover“-Effekt hinzu (auch direction-aware overlay genannt).
Ein Overlay soll von der Seite hereingleiten, über die der Zeiger kam, und zu der Seite hinausgleiten, über die er das Element verlässt: schnell und weich.
Ermittle die Seite aus der Zeigerposition beim Betreten und Verlassen und nutze bei Touch oder Tastaturfokus eine feste Standardrichtung.

Icons in einer Reihe wachsen weich, wenn sich der Zeiger nähert, wie im macOS-Dock.

Füge bei [wo] einen „Dock Magnification“-Effekt hinzu (auch dock genannt).
Die Icons der Reihe sollen weich größer werden, je näher der Zeiger kommt, das nächste am größten und seine Nachbarn leicht vergrößert, und alle zur normalen Größe zurückkehren, wenn der Zeiger die Reihe verlässt.
Lass die Icons von einer festen Grundlinie aus nach oben wachsen und halte jedes Icon bei Touch und Tastatur in normaler Größe bedienbar.

Das Element hebt sich beim Hovern ein paar Pixel an, als würde es schweben.

Füge bei [wo] einen „Float“-Hover-Effekt hinzu (auch lift oder raise genannt).
Das Element soll sich ein Stück anheben und oben bleiben, solange der Zeiger darüber ist, und beim Verlassen zurücksinken: weich und sanft, ohne Nachfedern.
Bewege es nur optisch, ohne das umgebende Layout zu verschieben, und zeige denselben Effekt beim Tastaturfokus.

Benachbarte Karten werden unscharf und abgedunkelt, während die gehoverte Karte scharf bleibt.

Füge bei [wo] einen „Focus Cards“-Effekt hinzu (auch blur siblings on hover, hover focus blur oder card hover effect genannt).
Solange der Zeiger über einer Karte ist, sollen die anderen Karten unscharf, dunkler und etwas kleiner werden, während die gehoverte Karte scharf bleibt, alles mit einem weichen Übergang, der sich beim Verlassen umkehrt.
Wende denselben Fokus beim Tastaturfokus an und halte alle Karten scharf und lesbar, wenn nichts gehovert wird.

Beim Hovern erscheint ein farbiger Lichtschein rund um das Element.

Füge bei [wo] einen „Glow“-Hover-Effekt hinzu (auch neon glow genannt).
Ein weicher farbiger Lichtschein soll um das Element einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden: sanft, ohne Bewegung.
Lass den Schein das Layout nicht beeinflussen und zeige denselben Effekt beim Tastaturfokus.

Das Element vergrößert sich weich ein wenig, solange der Zeiger darüber ist.

Füge bei [wo] einen „Grow“-Hover-Effekt hinzu (auch scale up genannt).
Das Element soll sich weich ein wenig vergrößern, solange der Zeiger darüber ist, und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern leert sich der gefüllte Hintergrund, sodass nur ein umrandeter Button bleibt.

Füge bei [wo] einen „Hollow“-Hover-Effekt hinzu (auch ghost fill genannt).
Der gefüllte Hintergrund soll ausblenden, sodass nur die Kontur bleibt, und die Beschriftung soll die Farbe wechseln, damit sie auf dem leeren Hintergrund lesbar bleibt: weich und schnell.
Halte die Rahmenstärke in beiden Zuständen gleich, damit sich die Größe des Elements nicht ändert, und zeige denselben Effekt beim Tastaturfokus.

Ein Verlaufsrahmen bewegt sich um das Element und breitet sich aus, sobald der Zeiger darüber ist.

Füge bei [wo] einen „Hover Border Gradient“-Effekt hinzu.
Ein kurzer Verlaufsschimmer soll auf einem Teil des Rahmens ruhen; solange der Zeiger über dem Element ist, soll er gleichmäßig um den Rahmen wandern, während der ganze Rahmen mit sanftem Glühen heller wird.
Animiere den Rahmen nur beim Hovern und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Beim Hovern erscheint unter dem Element ein weicher Schatten oder wird tiefer und deutet so Erhöhung an.

Füge bei [wo] einen „Hover Shadow“-Effekt hinzu (auch drop shadow on hover oder elevation on hover genannt).
Ein weicher Schatten unter dem Element soll tiefer und breiter werden, solange der Zeiger darüber ist, damit es angehoben wirkt, und beim Verlassen wieder zurückgehen, während das Element selbst an seinem Platz bleibt.
Halte den Schatten dezent genug für helle und dunkle Themes und zeige denselben Effekt beim Tastaturfokus.

Eine durchscheinende Überlagerung tönt das Element und zeigt so, dass der Zeiger darüber ist.

Füge bei [wo] einen „Hover State Layer“ hinzu (auch hover state, state layer oder hover overlay genannt).
Eine schwache, durchscheinende Überlagerung in der Inhaltsfarbe soll schnell über dem Element einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden.
Halte sie schwach, damit der Kontrast erhalten bleibt, und nutze denselben Layer-Ansatz für Fokus- und gedrückte Zustände.

Beim Hovern fällt ein Icon aus dem Sichtbereich und kehrt von oben zurück.

Füge bei [wo] einen „Icon Drop“-Hover-Effekt hinzu.
Das Icon im Element soll nach unten aus dem Sichtbereich fallen und dann von oben wieder an seinen Platz fallen: schnell, mit sanfter Landung.
Spiele ihn bei jedem Eintritt des Zeigers einmal ab statt in Schleife, und lass Beschriftung und Button-Größe unverändert.

Ein Icon schwebt aus dem Button und blendet aus, während ein neues hereinschwebt.

Füge bei [wo] einen „Icon Float Away“-Hover-Effekt hinzu.
Das aktuelle Icon soll nach oben wegschweben und ausblenden, während ein neues Icon von unten sanft an seinen Platz schwebt; beim Verlassen des Zeigers soll sich der Wechsel umkehren.
Halte die Button-Größe während des Wechsels fest und zeige denselben Effekt beim Tastaturfokus.

Ein Icon in einem Button dreht sich, wenn man über den Button hovert.

Füge bei [wo] einen „Icon Spin“-Hover-Effekt hinzu.
Das Icon im Element soll sich beim Eintritt des Zeigers sanft einmal ganz drehen und beim Verlassen zurückdrehen.
Drehe nur das Icon, nicht den ganzen Button, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern gleitet die Beschriftung hinaus, und ein Pfeil sowie eine Füllung breiten sich aus.

Füge bei [wo] einen „Interactive Hover Button“-Effekt hinzu.
Der kleine Punkt neben der Beschriftung soll sich ausdehnen, bis er den Button füllt, während die Beschriftung zur Seite gleitet und ausblendet; die Beschriftung mit einem Pfeil gleitet dann über die neue Füllung herein: weich und schnell.
Halte die Button-Größe fest und die Beschriftung jederzeit lesbar, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern gleitet ein Pfeil oder das Element selbst ein paar Pixel vor oder zurück.

Füge bei [wo] einen „Nudge Forward / Backward“-Hover-Effekt hinzu (auch arrow nudge genannt).
Der Pfeil soll ein kleines Stück in seine Zeigerichtung gleiten, solange der Zeiger über dem Element ist, und beim Verlassen zurückgleiten: schnell und knapp.
Bewege nur den Pfeil, ohne Beschriftung oder Layout zu verschieben, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern wächst eine Kontur vom Element nach außen oder zieht sich zu ihm zusammen.

Füge bei [wo] einen „Outline Expand“-Hover-Effekt hinzu.
Eine Kontur soll bündig an der Kante des Elements beginnen und nach außen wandern, bis ringsum eine kleine Lücke bleibt, dort beim Hovern stehen bleiben und sich beim Verlassen des Zeigers wieder schließen: weich und schnell.
Zeichne die Kontur so, dass sie die Größe des Elements nicht ändert und benachbarte Inhalte nicht verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern wächst über dem Text eine Linie von links, aus der Mitte oder von rechts.

Füge bei [wo] einen „Overline Grow“-Hover-Effekt hinzu.
Eine Linie über dem Text soll aus der Mitte nach beiden Seiten wachsen, solange der Zeiger darüber ist, und beim Verlassen zur Mitte zurückschrumpfen: schnell und weich.
Reserviere Platz für die Linie, damit der Text nicht springt, und zeige denselben Effekt beim Tastaturfokus.

Das Element vergrößert sich schnell und federt mit einem kleinen Plopp zurück.

Füge bei [wo] einen „Pop“-Hover-Effekt hinzu.
Bei jedem Eintritt des Zeigers soll das Element einmal schnell anschwellen und wieder auf seine normale Größe zurückgehen, wie ein kleiner federnder Plopp.
Spiele ihn einmal pro Hover ab, statt die größere Größe zu halten oder zu loopen, und verhindere, dass sich das umgebende Layout verschiebt.

Das Element sinkt kurz ein und kommt zurück, als würde man einen echten Knopf drücken.

Füge bei [wo] einen „Push“-Hover-Effekt hinzu.
Bei jedem Eintritt des Zeigers soll das Element einmal schnell kleiner werden und auf seine normale Größe zurückfedern, als würde es wie ein echter Knopf hineingedrückt.
Spiele ihn einmal pro Hover ab statt in Schleife, und verhindere, dass sich das umgebende Layout verschiebt.

Beim Hovern wächst ein farbiger Kreis aus der Mitte oder schrumpft zu ihr hin, um das Element zu füllen.

Füge bei [wo] einen „Radial Fill“-Hover-Effekt hinzu (auch circle expand genannt).
Ein Kreis in der neuen Farbe soll sanft aus der Mitte wachsen, bis er das Element füllt, und beim Verlassen des Zeigers zur Mitte zurückschrumpfen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben.
Beschneide den Kreis auf die Form des Elements, halte die Beschriftung darüber und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern dehnt sich ein Rechteck im Element aus oder zieht sich zusammen und ändert so den Hintergrund.

Füge bei [wo] einen „Rectangle Fill“-Hover-Effekt hinzu.
Die neue Hintergrundfarbe soll sich von allen vier Kanten her schließen, während ein inneres Rechteck zur Mitte schrumpft, und sich beim Verlassen des Zeigers wieder öffnen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben: weich und schnell.
Halte die Beschriftung über der Füllung und zeige denselben Effekt beim Tastaturfokus.

Das Element dreht sich beim Hovern um ein paar Grad.

Füge bei [wo] einen „Rotate“-Hover-Effekt hinzu.
Das Element soll sich leicht im Uhrzeigersinn drehen, solange der Zeiger darüber ist, und beim Verlassen zurückdrehen: weich und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Die Ecken des Elements runden sich beim Hovern weich ab.

Füge bei [wo] einen „Round Corners“-Hover-Effekt hinzu.
Die spitzen Ecken des Elements sollen sich weich abrunden, solange der Zeiger darüber ist, und beim Verlassen wieder spitz werden: sanft und schnell.
Lass die Größe des Elements unverändert und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern gleitet ein diagonaler Lichtstreifen von einer Seite zur anderen über das Element.

Füge bei [wo] einen „Shine Sweep“-Hover-Effekt hinzu (auch sheen, shiny button, shine on hover, glint, shimmer oder shimmer button genannt).
Ein weicher diagonaler Lichtstreifen soll von links nach rechts über das Element gleiten und sich mit einer kurzen Pause wiederholen, solange der Zeiger darüber bleibt.
Schneide den Streifen am Rand des Elements ab, stoppe ihn, wenn der Zeiger es verlässt, und spiele ihn bei reduzierter Bewegung (prefers-reduced-motion) nicht ab.

Das Element verkleinert sich weich ein wenig, solange der Zeiger darüber ist.

Füge bei [wo] einen „Shrink“-Hover-Effekt hinzu (auch scale down genannt).
Das Element soll sich weich ein wenig verkleinern, solange der Zeiger darüber ist, und beim Verlassen wieder wachsen: schnell und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern öffnet oder schließt sich der Hintergrund wie Fensterläden von der Mitte oder von den Rändern aus.

Füge bei [wo] einen „Shutter Fill“-Hover-Effekt hinzu (auch shutter genannt).
Die neue Hintergrundfarbe soll sich von einer senkrechten Linie in der Mitte wie Fensterläden zu beiden Seiten öffnen und sich beim Verlassen wieder zur Mitte schließen, während die Schriftfarbe wechselt, damit der Text lesbar bleibt: weich und schnell.
Schneide die Füllung am Rand des Elements ab, halte den Text darüber und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern rutscht das Element ein paar Pixel nach unten, als würde es in die Seite gedrückt.

Füge bei [wo] einen „Sink“-Hover-Effekt hinzu.
Das Element soll ein wenig nach unten rutschen und dort bleiben, solange der Zeiger darüber ist, als würde es in die Seite gedrückt, und beim Verlassen wieder hochkommen: weich, ohne Nachfedern.
Verschiebe es nur optisch, ohne das umgebende Layout zu bewegen, und zeige denselben Effekt beim Tastaturfokus.

Das Element neigt sich beim Hovern seitlich schräg.

Füge bei [wo] einen „Skew“-Hover-Effekt hinzu.
Das Element soll sich seitlich in eine leichte Schräglage neigen, solange der Zeiger darüber ist, und sich beim Verlassen wieder aufrichten: schnell und weich.
Halte den Text in der Schräglage lesbar, verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern erscheint an einer Seite des Elements ein kleines Sprechblasen-Dreieck.

Füge bei [wo] einen Sprechblasen-Hover-Effekt (Speech Bubble) hinzu, auch bubble genannt.
Ein kleiner dreieckiger Zipfel soll hinter einer Seite des Elements hervorgleiten und es zur Sprechblase machen, und beim Verlassen wieder zurückgleiten: schnell und weich.
Gib dem Zipfel dieselbe Farbe wie dem Element, damit beide als eine Form wirken, und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern erscheint eine innere Randlinie knapp innerhalb der Kante des Elements.

Füge bei [wo] einen „Trim“-Hover-Effekt hinzu.
Eine dünne Linie soll knapp innerhalb der Kante des Elements einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden: dezent, ohne Bewegung.
Halte die Linie innerhalb des Elements, damit sich seine Größe nicht ändert, und zeige denselben Effekt beim Tastaturfokus.

Eine Linie gleitet von der Unter- oder Oberkante an ihren Platz und unter- oder überstreicht das Element.

Füge bei [wo] einen „Underline Reveal“-Hover-Effekt hinzu (auch overline reveal oder reveal genannt).
Eine Linie über die volle Breite soll von knapp unterhalb der Unterkante nach oben an ihren Platz gleiten, solange der Zeiger über dem Element ist, und beim Verlassen wieder nach unten aus dem Blick gleiten: schnell und weich.
Schneide die Linie an der Kante ab, damit sie durch Gleiten erscheint statt durch Einblenden oder Wachsen, und zeige denselben Effekt beim Tastaturfokus.

Die Karte verschiebt und skaliert sich leicht, wenn sich der Zeiger über ihr bewegt.

Füge bei [wo] einen „Wobble Card“-Effekt hinzu.
Wenn sich der Zeiger über die Karte bewegt, soll sie sich leicht zu ihm hin verschieben, während ihr Inhalt sich leicht in die Gegenrichtung verschiebt und etwas vergrößert, weich folgend, und beim Verlassen kehrt alles an seinen Platz zurück.
Halte die Bewegung klein und schalte sie auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) ab.