10 benutzerdefinierte CSS- und JavaScript-Snippets für Hover- und Klick-Effekte

Entwickler können mit einfachen Benutzeraktionen wie Hover und Mausklicks einige verrückte Effekte erzielen. Diese beziehen sich hauptsächlich auf Desktop-Benutzer, aber das mobile Web unterstützt in den meisten Browsern auch Klick-/Touch-Effekte.

Wenn Sie auf der Suche nach coolen Ideen sind, die Sie in Ihren eigenen Projekten umsetzen können, dann hat diese Sammlung sicher etwas für Sie. Jeder, der sich ein wenig mit JavaScript und CSS auskennt, kann diese Effekte leicht so anpassen, dass sie in jedem Browser und für jede Website funktionieren und das Erlebnis eines Layouts aufpeppen.

Schaltflächen-Hover-Effekte

Der offensichtliche Ausgangspunkt für Animationseffekte sind CSS-Schaltflächen. Diese sind im täglichen Gebrauch am praktischsten, da sie viel Interaktivität handhaben. CTA-Buttons schreien förmlich nach Aufmerksamkeit und mit diesen Hover-Effekten erregen Sie noch schneller Aufmerksamkeit.

Jeder Effekt verwendet reines CSS für die Animation. Einige dieser Schaltflächen verlassen sich auf JavaScript für die Mouseover-Ereignisse, aber alle Animationen werden immer noch direkt in CSS gesteuert.

Wenn Sie ein flaches Layout entwerfen, sind diese Animationen sehr einfach zu bearbeiten.

Navi schwebt

Für diesen Stift finden Sie eine Handvoll Navigations-Hover-Ereignisse. Diese setzen auf reines CSS, das wiederum jeden Hyperlink mit einem anderen Hover-Effekt steuert.

Navigationsmenüs sind normalerweise sehr einfach und generisch. Aus diesem Grund können Hover-Events das Design wirklich aufpeppen und den Besuchern zeigen, dass Ihnen die kleinen Details wichtig sind.

Die meisten dieser Animationen sind zahm genug, um auf jede Website zu passen, sodass sie sich hervorragend zum einfachen Kopieren/Einfügen in jedes Layout eignen.

Foto-Hover-Effekte

Wie oft finden Sie Fotogalerien mit langweiligen Untertiteln und ohne wirklichen Kontext? Ich sehe diese allzu oft, und sie fühlen sich einfach faul.

Ich mag diese Fotoeffekte sehr, die alle auf der einfachen Thumbnail-Galerie beruhen. Wenn Sie den Mauszeiger über ein Bild bewegen, sehen Sie den Titel des Fotos, eine Beschreibung und eine Schaltfläche „Weiterlesen“.

Jedes Element gleitet aus verschiedenen Blickwinkeln in die Ansicht und hilft dieser Bildergalerie, direkt aus der Seite herauszuspringen.

CSS-Tooltip schwebt

Jeder Browser unterstützt Standard-Tooltips, aber Sie können jederzeit Ihre eigenen erstellen, indem Sie Plugins verwenden oder Stifte wie diesen klonen. Es wurde von Ty Strong entwickelt und zeigt, wie weit man mit reinen CSS-Tooltips gehen kann.

Dieses gesamte Snippet funktioniert, indem es auf das HTML-<dfn>-Tag abzielt. Wenn Sie den Mauszeiger über einen Text bewegen, der in dieses Tag eingeschlossen ist, wird er beim Bewegen des Mauszeigers automatisch eingeblendet und wie ein Tooltip angezeigt.

Reine CSS-Dreiecke gibt es schon seit Jahren, daher ist es einfach genug, den Tooltip-Stil neu zu erstellen. Am meisten beeindruckt bin ich jedoch von den reibungslosen Animationszuständen, die alle über CSS3 gesteuert werden.

CSS-Icons beim Hover

Hier ist noch ein weiteres Beispiel für etwas Cooles, das Sie mit reinem CSS machen können. Diese einfachen Schaltflächen haben alle versteckte Symbole, die nur erscheinen, wenn ein Cursor darauf landet.

Jedes Symbol stammt von Font Awesome, sodass Sie dieses Design mit völlig kostenlosen Symbolen replizieren können.

Zu den Effekten gehören Slide-Ins, Dehnungen und verblassende Symbole, die beim Bewegen des Mauszeigers erscheinen und verschwinden, wenn sich der Cursor an eine andere Stelle bewegt.

Unendliche Paginierung

Web-Paginierung ist immer ziemlich langweilig, wahrscheinlich weil es kein auffälliger Teil der Benutzeroberfläche ist. Aber mit diesem Paginierungseffekt von Mariusz Dabrowski könnten Sie Ihre Paginierung auf die nächste Stufe heben.

Das einzige an dieser Animation ist, dass sie von einer Seite zur anderen geladen werden kann. Es funktioniert also am besten mit Ajax-basierten Seiten, bei denen nicht die gesamte Seite neu geladen wird. Auf diese Weise ist die gesamte Animation sichtbar, während der neue Inhalt geladen wird.

Es hat definitiv einen begrenzten praktischen Wert, aber die Wirkung ist hervorragend.

Overlay-Navigationsanimation

Vollbild-Navigationsmenüs sind sehr beliebt für mobile responsive Websites und funktionieren auch für die meisten Benutzer. Aber diese müssen nicht langweilig oder statisch sein, wenn Sie Overlay-Effekte wie diesen kostenlos auf CodePen haben.

Entwickler Ryan Mulligan hat diese scheußliche Animation mit reinen CSS-Keyframes erstellt, die auf einer einzigen CSS-Klasse laufen.

Das Klickereignis wird über jQuery ausgelöst, aber die Bewegung ist alles CSS. Definitiv eine der cooleren Animationen, die ich je gesehen habe, und es ist überraschend flüssig zu booten.

Reiner CSS-Klick-Effekt

Das Materialdesign von Google skizziert eine Reihe von animierten Effekten und einer davon ist der Ripple-Click-Effekt. Dies ist am häufigsten bei Android-Geräten der Fall, aber es ist auch ins Internet gelangt.

Und mit diesem Stift können Sie den Welleneffekt in Ihrer eigenen Arbeit replizieren, indem Sie nur CSS-Code verwenden.

Dieses Snippet zielt auf Symbole ab, die auch aufleuchten, wenn sie ausgewählt werden, also ist es ein bisschen mehr wie das Tabulatoren/Auswählen von Seitenelementen. Aber die Effekte sind auf alles übertragbar, was das Klonen einfach macht.

Mana-Schaltfläche

Hier ist einer der einzigartigsten Schaltflächeneffekte, die ich je mit SVGs für die Formen und CSS für die Animation gesehen habe.

Programmierer Dean Hidri hat diesen Mana-Button-Effekt mit nur 80 CSS-Zeilen und ein paar Dutzend HTML-Zeilen (einschließlich SVG) erstellt. Beim Hover animiert diese Schaltfläche eine benutzerdefinierte Flüssigkeitsform innerhalb der Schaltfläche, um eine Hintergrundfüllung zu erstellen, und wird anschließend animiert.

Wenn Sie eine Website haben, die diesen Schaltflächenstil verwenden könnte, lohnt es sich auf jeden Fall, damit herumzuspielen.

Kultige Button-FX

Mit Icon-Fonts kann man viel machen und diese animierten Buttons von David Darnes sind ein tolles Beispiel.

Die Symbole werden auf unterschiedliche Weise animiert, wenn sie darüber bewegt werden, jedes mit seinem eigenen charakteristischen Effekt. Möglicherweise verwenden Sie nicht alle diese Symbole auf einer Website, aber die benutzerdefinierten Animationsstile lassen sich einfach klonen. Sie funktionieren ausschließlich mit CSS3 und passen zu jeder Symbolschrift, die Sie auswählen. Ein wirklich lustiger Effekt zum Klonen für so ziemlich jede Website!

Und damit ist meine Liste der UX-Effekte abgeschlossen, aber dies ist sicherlich nicht die endgültige Sammlung.

Wenn Sie das Internet durchsuchen, finden Sie viele andere Hover-Effekte für Schaltflächen/Symbole, und viele haben kostenlosen Quellcode. Wenn Sie jedoch mehr über benutzerdefinierte Webanimationen erfahren möchten, sehen Sie sich unsere umfangreiche Liste mit Plugins und Ressourcen für Entwickler an.