FX Library: 120 moderne CSS-Effekte für Webdesign & WordPress

Webdesign, CMS & Entwicklung

von Stefan Petri

Du brauchst einen Button, der wirklich leuchtet, eine Karte, die sich zum Mauszeiger neigt, oder einen Loader, der nicht nach 2012 aussieht? Die FX Library liefert dir 120 fertige UI- und Animations-Effekte als reines HTML und CSS, ohne Framework, ohne JavaScript in den Komponenten und ohne externe Dateien. Du öffnest die Showcase-Datei im Browser, suchst dir einen Effekt aus und kopierst HTML und CSS mit je einem Klick. Das Präfix .fx- und eigene Resets in jeder Komponente machen die Effekte fit für WordPress, Elementor und Co.

120 Effekte in sechs Sets zu je 20: Buttons, Cards & Container, Hover-Effekte, Loader & Spinner, Glassmorphism-Oberflächen sowie Scroll- & Entry-Animationen.
Kopieren statt nachbauen: Jeder Effekt hat eine Live-Vorschau und je einen Button für HTML und CSS, und das kopierte CSS bringt die benötigten Variablen gleich mit.
Konfliktfrei in WordPress und Page-Buildern: Alle Klassen beginnen mit .fx-, und jeder Effekt ist zusätzlich in einem Test-Theme mit aggressiven Standard-Styles geprüft.
Ein Farbschema für alles: Farben, Schrift, Abstände und Rundungen stehen als CSS-Variablen im :root. Du änderst eine Zeile, und alle Effekte ziehen mit.
Schnell und rücksichtsvoll: Animiert wird fast ausschließlich mit transform und opacity, ohne Webfonts, und wer „Bewegung reduzieren“ eingestellt hat, sieht ruhige Effekte.

Effekt aussuchen, kopieren, fertig. Deine nächste Website sieht aus, als hättest du tagelang an den Details gefeilt.

Inhalt

6 Inhalte

Die 6 Effekt-Sets

FX Library Buttons: 20 animierte CSS-Buttons zum Kopieren

20 animierte Buttons als reines HTML und CSS: von Shimmer Slide und Neon Glow über 3D Push, Liquid Fill und Cyberpunk Glitch bis zu Glass Reflection und Soft Neomorph. Jeder Button reagiert auf Hover, Tastaturfokus und Klick, der Magnet-Button folgt sogar der Maus, ganz ohne JavaScript. Dazu gehören eine Showcase-Datei mit Live-Vorschau, Suche und Copy-Buttons, eine CSS-Datei mit allen 20 Effekten und eine Anleitung für WordPress und Page-Builder. Stand: September 2026.

FX Library Cards & Container: 20 CSS-Karten mit Hover-Effekten

20 Karten und Container für Preistabellen, Profile, Produkte, Kennzahlen und mehr: Spotlight-Glow und 3D-Tilt, die dem Mauszeiger folgen, ein rotierender Verlaufsrahmen, Holo-Folie wie bei einer Sammelkarte, Flip-Card, gestapelte Karten und ein Akkordeon auf Basis von

. Alle Karten sind mit realistischen Beispielinhalten gefüllt und auch per Tastatur erreichbar. Mit Showcase-Datei, CSS-Datei und Anleitung. Stand: September 2026.

FX Library Hover-Effekte: 20 CSS-Interaktionen für Bilder, Text & UI

20 Hover- und Interaktionseffekte für Bilder, Texte und UI-Elemente: Zoom mit aufblühenden Farben, ein richtungsabhängiges Overlay, Text-Scramble, Lens Flare und Fadenkreuz, die dem Cursor folgen, eine Ripple-Spur, SVG-Strichzeichnung, Filmkorn, Duotone und ein wachsender Clip-Path-Kreis. Alle Bilder sind als Inline-SVG gezeichnet und lassen sich durch eigene Fotos ersetzen. Mit Showcase-Datei, CSS-Datei und Anleitung. Stand: September 2026.

FX Library Loader & Spinner: 20 animierte CSS-Ladeanimationen

20 Loader und Spinner, vom minimalen Pulsring über Infinity Loop, Morphing Blob und Neon-Radar bis zu Sanduhr, Newton-Pendel und digitalem Countdown. Jeder Loader skaliert über eine einzige Variable, meldet sich bei Screenreadern als Ladezustand und läuft in einer nahtlosen Schleife. Mit Showcase-Datei, CSS-Datei und Anleitung. Stand: September 2026.

FX Library Glassmorphism: 20 Glas-Oberflächen & UI-Widgets in CSS

20 Glassmorphism-Oberflächen und fertige Glas-Widgets: Acryl hell und dunkel, holografisches und geätztes Glas, Glas-Navigation, Dialogfenster, Suchleiste, Kennzahlen-Widget, Audio-Player und Badges, dazu stimmungsvolle Flächen wie Polarlicht, Rauchglas und Tiefsee mit eigener Kulisse. Alle Flächen arbeiten mit backdrop-filter und folgen dem Farbschema der Theme-Variablen. Mit Showcase-Datei, CSS-Datei und Anleitung. Stand: September 2026.

FX Library Scroll & Entry: 20 CSS-Einblend- und Scroll-Animationen

20 Entry- und Scroll-Animationen für Überschriften, Karten, Bilder und Listen: gestaffeltes Einblenden, Blur to Sharp, 3D-Aufklappen, Vorhänge, Spiralflug, Kartenmischen, Parallaxe und ein schrumpfender Sticky-Header. Die Animationen starten beim Laden; mit einer Zusatzklasse laufen sie ohne JavaScript beim Hineinscrollen ab (Chrome, Edge und Safari ab Version 26). Mit Showcase-Datei, CSS-Datei und Anleitung. Stand: September 2026.

Details zum Inhalt

Die FX Library ist eine Sammlung aus 120 UI- und Animations-Effekten für moderne Websites, aufgeteilt in sechs Sets zu je 20 Effekten. Jede Komponente besteht aus einem HTML- und einem CSS-Schnipsel und läuft ohne Framework, ohne JavaScript und ohne externe Dateien; Bilder in den Beispielen sind als Inline-SVG gezeichnet. In der Showcase-Datei siehst du alle Effekte als Live-Vorschau, filterst nach Kategorie oder suchst nach Namen und kopierst den Code mit einem Klick. Über vier Farbthemen probierst du direkt aus, wie sich die Effekte an dein Branding anpassen.

In WordPress setzt du das HTML in einen Block „Individuelles HTML“ oder in das HTML-Element deines Page-Builders und das CSS unter „Zusätzliches CSS“. Weil alle Klassen mit .fx- beginnen und jede Komponente ihre Schrift, Abstände und Zustände selbst festlegt, kommen sich Effekte und Theme nicht in die Quere. Farben, Schrift, Abstände und Rundungen steuerst du zentral über CSS-Variablen. Jedes Set enthält außerdem eine CSS-Datei mit allen 20 Effekten und eine Anleitung.

Alle 120 Effekte auf einen Blick

Buttons

#001 Shimmer Slide
#002 Neon Glow
#003 3D Push
#004 Border Trace
#005 Ripple Wave
#006 Magnetic Hover Feel
#007 Gradient Sweep
#008 Liquid Fill
#009 Cyberpunk Glitch
#010 Minimal Underline Draw
#011 Pill Pulse
#012 Glass Reflection
#013 Dot Grid Pop
#014 Retro Inset
#015 Dual-Layer Shift
#016 Skew Slicer
#017 Strobe Border
#018 Floating Float
#019 Magnetic Border Beam
#020 Soft Neomorph

Cards & Container

#021 Spotlight Cursor Glow
#022 3D Tilt Hover
#023 Gradient Border Rotate
#024 Depth Layer Lift
#025 Frosted Card
#026 Inner Shadow Recess
#027 Expand on Focus
#028 Glass Reflection Sweep
#029 Holographic Foil
#030 Minimal Ghost Border
#031 Neon Corner Accents
#032 Skew Perspective
#033 Stacked Cards Peek
#034 Reveal Footer Card
#035 Radial Gradient Burst
#036 Floating Badge Card
#037 Prism Edge
#038 Split Contrast Card
#039 Interactive Flip Card
#040 Smooth Accordion Container

Hover- & Interaktions-Effekte

#041 Image Zoom & Saturation
#042 Directional Slide Overlay
#043 Text Scramble Simulator
#044 Underline Morph
#045 Icon Orbit Reveal
#046 Background Mesh Shift
#047 Grayscale to Vibrant
#048 Border Bracket Expand
#049 Lens Flare Move
#050 Masked Text Reveal
#051 Ripple Cursor Trail
#052 Kinetic Typo Shake
#053 SVG Stroke Draw
#054 Noise Texture Grain
#055 Dual Tone Shift
#056 Circle Clip-Path Expand
#057 Skewed Banner Reveal
#058 Floating Tooltip Morph
#059 Drop-Shadow Bloom
#060 Crosshair Target Snap

Loader & Spinner

#061 Minimal Pulse Ring
#062 Tri-Dot Stagger Wave
#063 Infinity Loop
#064 Gradient Conic Spinner
#065 Morphing Blob
#066 Dual-Orbit Planets
#067 Barcode Scanner Line
#068 Liquid Fill Flask
#069 Hourglass Flip
#070 Bouncing Cubes
#071 Soundwave Equalizer
#072 Neon Radar Sweep
#073 Segmented Ring Progress
#074 Glowing Particle Spiral
#075 Step Dots Progress
#076 Cyber Hexagon Pulse
#077 Shifting Square Lattice
#078 Pendulum Swing
#079 Elastic Stretch Bar
#080 Digital Countdown Spinner

Glassmorphism & moderne Oberflächen

#081 Frosted Acrylic Dark
#082 Frosted Acrylic Light
#083 Holographic Prism Glass
#084 Noise-Etched Glass
#085 Multi-Layer Depth Glass
#086 Colored Glass Gradient
#087 Mirror Edge Reflection
#088 Cyber Neon Backdrop
#089 Frosted Pill Navigation
#090 Glass Modal Window
#091 Translucent Search Bar
#092 Blurred Metric Widget
#093 Aurora Borealis Surface
#094 Glass Badge Pill
#095 Frosted Audio Player Widget
#096 Prismatic Edge Border
#097 Smoke Glass Overlay
#098 Ultra-Thin Line Glass
#099 Deep Sea Glass
#100 Satin Matte Glass

Scroll- & Entry-Animationen

#101 Staggered Fade-Up
#102 Blur to Sharp In
#103 Scale Elastic In
#104 Flip-X Perspective
#105 Split Column Slide
#106 Clip-Path Diagonal Reveal
#107 Parallax Depth Simulation
#108 Letter-by-Letter Drift
#109 Zoom-Out Settle
#110 Floating Ambient Sway
#111 Pop & Settle Spring
#112 Horizontal Ribbon Slide
#113 3D Fold Open
#114 Wipe Down Curtains
#115 Skew & Straighten
#116 Soft Glow Fade-In
#117 Spiral Zoom Entry
#118 Card Shuffle Settle
#119 Sticky Element Shrink
#120 Curtain Reveal Split

Hinweis

Verwendbar mit: HTML & CSS, WordPress
Lizenz: private und kommerzielle Nutzungsrechte

Mit Liebe erstellt von

Stefan Petri

Stefan Petri betreibt zusammen mit seinem Bruder Matthias das beliebte Fachforum PSD-Tutorials.de sowie die E-Learning-Plattform TutKit.com, die in der Aus- und Fortbildung digitaler beruflicher Kompetenzen einen Schwerpunkt setzt.

Produkte

Neueste Produkte von Stefan