My CSS Playground

✨ Cool Animations

Float Animation

Pulse Glow

Bounce

👋 Wave

🔄 Rotate

Glow Pulse

		
		animate-float, animate-pulse-glow, animate-bounce,

		animate-wave, animate-rotate, animate-fade-up,

		animate-slide-left, animate-slide-right, animate-scale-in

🎨 Beautiful Buttons

		
		wp-btn (base)

		wp-btn--primary, wp-btn--secondary, wp-btn--outline,

		wp-btn--glow, wp-btn--3d, wp-btn--icon

		wp-btn--sm, wp-btn--lg (sizes)

👓 Glass Effect

🃏 Stylish Cards

📈 Lift Effect

Hover to lift up

✨ Glow Effect

Hover for glowing border

🔍 Scale Effect

Hover to scale up

🌈 Gradient Border

Beautiful gradient border

💎 Glassmorphism

Frosted glass effect

🎭 Animated BG

Animated gradient background

		
		wp-card (base)

		wp-card--lift, wp-card--glow, wp-card--scale,

		wp-card--gradient, wp-card--glass, wp-card--animated-bg

🏷️ Badges & Tags

Primary Secondary Success Outline

Pulsing!

		
		wp-badge (base)

		wp-badge--primary, wp-badge--secondary, wp-badge--success,

		wp-badge--outline, wp-badge--pulse

✍️ Animated Inputs

Floating Label

		
		wp-input (base with focus animation)

		wp-input--animated (gradient border on focus)

		wp-input--floating + wp-label--floating (floating label)

🖼️ Image Hover Effects

		
		wp-image-hover wp-image-hover--zoom (zoom on hover)

		wp-image-hover wp-image-hover--reveal (reveal text, add data-text attribute)

		wp-image-hover wp-image-hover--slide (slide overlay)

📊 Progress Bars

70% Complete

85% Complete (Striped Animated)

		
		wp-progress (container)

		wp-progress__bar (bar with width in %)

		wp-progress--striped (animated stripes)

🚨 Alerts

✅

Success! Your changes have been saved.

❌

Error! Something went wrong.

⚠️

Warning! Please check your input.

ℹ️

Info! Here's some helpful information.

		
		wp-alert wp-alert--success

		wp-alert wp-alert--error

		wp-alert wp-alert--warning

		wp-alert wp-alert--info

💡 Tooltips

wp-tooltip with data-tooltip="Your text" attribute

➖ Dividers

Standard Divider

Gradient Divider

Animated Divider

Dotted Divider

		
		wp-divider (standard)

		wp-divider--gradient

		wp-divider--animated

		wp-divider--dotted

📋 How to Use in WordPress

Step 1: Add the CSS

Copy the entire contents of wordpress-animations.css and paste it into:

WordPress Dashboard → Appearance → Customize → Additional CSS
OR use a plugin like "Simple Custom CSS"
OR add to your theme's style.css file

Step 2: Add the HTML Classes

Use the HTML classes in your WordPress content:

In the Block Editor: Add a "Custom HTML" block and paste the HTML
In Classic Editor: Switch to Text view and add the HTML
In Elementor/Divi: Use the HTML widget

Step 3: Customize Colors

Change the color variables at the top of the CSS file to match your brand:

		:root {

		  --color-primary: #your-color;

		  --color-secondary: #your-color;

		}