Uiverse Animated Button with Floating Circles Using HTML & CSS

Want to add a touch of creativity and magic to your website buttons? This Uiverse-inspired button design is the perfect example of combining animation, vibrant colors, and elegant movement using only HTML and CSS.

In this tutorial, we’ll explore how this visually stunning button works and how you can use it on your site to impress your users.

What Is the Uiverse Button?

The Uiverse button is a modern, animated UI element that features a floating circle effect. When idle, it looks like a clean, circular-gradient button. But once hovered, it comes alive with dynamic, colorful orbs that gently float and bounce in the background.

This design is inspired by styles found on Uiverse.io, a popular platform showcasing creative UI components built purely with CSS.

Key Features of This Button Design

• Vibrant, glowing background

• Floating animated circles

• Smooth, infinite animations

• CSS-only — no JavaScript required

• Customizable colors and animation speeds

How It Works

1. HTML Structure

The button contains a main <button> element with a nested <div class="wrapper">. Inside the wrapper:

• The label UIVERSE is placed within a <span>

• Twelve <div> elements with the class circle are used to create the floating orbs

Each circle is uniquely styled and animated using custom CSS variables.

2. Radial Gradient Background

The button’s background is created using a radial gradient, giving it a soft, glowing center and lighter outer ring. This provides a sci-fi or futuristic aesthetic that works well on landing pages, portfolios, or developer tools.

3. Floating Circles Animation

Each .circle element is:

• Positioned absolutely inside the wrapper

• Animated with its own keyframes for individual movement paths

• Styled with unique blur and color values for depth

The result is a fluid, mesmerizing animation that feels dynamic and alive.

4. Hover Effect

On hover:

• The animation duration decreases (making orbs move faster)

• The entire button becomes more interactive and energetic

This hover feedback gives users a visual cue that the button is active and clickable.

Why Use This Button?

Here are a few reasons why this Uiverse-style button is worth trying:

• Engages attention with its moving visuals

• Enhances branding with customizable colors

• Adds polish to static web pages

• Works without JavaScript, keeping your site lightweight

Best Use Cases

• Developer portfolio websites

• Startup landing pages

• Creative agencies or UI libraries

• Web tools, apps, and demo pages

Customize It Your Way

You can easily tweak the:

• Number of circles

• Colors and gradients

• Animation speed and blur

• Text inside the button

To match your website’s theme, simply update the CSS variables.

Final Thoughts

This Uiverse animated button blends artistic visual effects with simple code, making it a great tool for designers and developers who want to stand out. It’s responsive, fast, and eye-catching — a perfect combination for modern web design.