How to Use Interactive Buttons

Complete documentation for our interactive button system. Learn how to integrate, customize, and master these dynamic elements for your web projects.

Quick Start

Get started in under 60 seconds! Our buttons work everywhere - from simple HTML websites to complex web applications. No dependencies required, and all effects are included in the package.

<!-- 1. Add this div where you want the button to appear -->
<div id="exploding-button-container"></div>

<!-- 2. Copy the generated code from our Button Generator -->
<script>
  // The customized button code will be here
  // Everything is included - no external CSS or JS needed!
  // Works in all modern browsers
  // Automatically handles responsive behavior
</script>

Integration Methods

Choose the integration method that best suits your project needs. We support multiple ways to add our interactive buttons to your application.

// 1. HTML Script Tag (Simplest)
<!-- Perfect for static websites or quick prototypes -->
<script src="https://cdn.example.com/interactive-button.js"></script>
<div id="button-container"></div>
<script>
  new InteractiveButton("#button-container", {
    text: "Click Me",
    effects: ["glitch", "particles"],
    theme: "cyberpunk"
  });
</script>

// 2. NPM Package (Recommended for Modern Apps)
// npm install @interactive-button/react
import { InteractiveButton } from '@interactive-button/react';

// 3. Web Component (Framework Agnostic)
<!-- Works with any framework or vanilla JS -->
<interactive-button
  text="Click Me"
  effects="glitch,particles"
  theme="cyberpunk"
></interactive-button>

// 4. iFrame Embed (No-Code Solution)
<!-- Perfect for CMS platforms or no-code tools -->
<iframe
  src="https://interactive-button.com/embed/xyz123"
  width="200"
  height="60"
  frameborder="0"
></iframe>

Styling Guide

Master the art of button styling with our comprehensive theming system. From minimal to cyberpunk, create any style you can imagine. All styles are fully responsive and maintain perfect visual harmony.

// Common styling recipes:

// 1. Modern Glass Effect
<StandaloneButton
  variant="glass"
  glowIntensity="strong"
  customColors={{
    text: "#93C5FD",
    background: "#1E293B",
    glow: "#3B82F6"
  }}
  rounded="none"
/>

// 2. Neon Cyberpunk
<StandaloneButton
  variant="solid"
  glowIntensity="cyberpunk"
  customColors={{
    text: "#F0F0F0",
    background: "#120318",
    glow: "#FF00FF"
  }}
  font="Orbitron"
/>

// 3. Minimal Corporate
<StandaloneButton
  variant="outline"
  glowIntensity="subtle"
  customColors={{
    text: "#FFFFFF",
    background: "transparent",
    glow: "#FFFFFF"
  }}
  rounded="4px"
  font="Inter"
/>

// 4. Luxury Brand
<StandaloneButton
  variant="ghost"
  customColors={{
    text: "#FFD700",
    background: "#000000",
    glow: "#FFD700"
  }}
  font="Cormorant Garamond"
  fontWeight="light"
/>

Interactive Effects Guide

Create stunning interactive experiences with our collection of effects. Mix and match them to create unique combinations. All effects are optimized for performance and work smoothly on both desktop and mobile devices.

// Example combinations for different use cases:

// 1. Call-to-Action Button (Attention-grabbing)
<StandaloneButton
  clickEffect={{
    glitch: true,
    glitchIntensity: 0.7,
    particles: true,
    particleCount: 12,
    shockwave: true,
    colorInversion: true
  }}
  variant="glass"
  glowIntensity="strong"
>
  Subscribe Now
</StandaloneButton>

// 2. Game UI Button (Energetic)
<StandaloneButton
  clickEffect={{
    flash: true,
    flashSize: 20,
    particles: true,
    particleSpread: "directional",
    liquidFill: true,
    liquidFillDirection: "center",
    pressEffect: true
  }}
>
  Start Game
</StandaloneButton>

// 3. Elegant Form Submit (Subtle)
<StandaloneButton
  clickEffect={{
    ripple: true,
    rippleOpacity: 0.2,
    pressEffect: true,
    pressScale: 0.98,
    magnetic: true,
    magneticStrength: 0.3
  }}
>
  Submit Form
</StandaloneButton>

// 4. Creative Portfolio (Artistic)
<StandaloneButton
  clickEffect={{
    pixelate: true,
    pixelateSize: 12,
    pixelateDuration: 800,
    glitch: true,
    glitchSlices: 8,
    magnetic: true
  }}
>
  View Project
</StandaloneButton>

Advanced Effects Configuration

Fine-tune every aspect of your button's behavior. Our effects system provides granular control over animations, timings, and interactions.

// Advanced effects configurations:

// 1. Glitch Effect Tuning
clickEffect={{
  glitch: true,
  glitchIntensity: 0.7,     // Controls effect strength (0.1 to 1)
  glitchDuration: 500,      // Animation duration in ms
  glitchColorOffset: 10,    // RGB split distance
  glitchSlices: 6,         // Number of glitch segments
  glitchVelocity: 20       // Speed of glitch movement
}}

// 2. Liquid Fill Configuration
clickEffect={{
  liquidFill: true,
  liquidFillDirection: "center", // center, top, bottom, left, right
  liquidFillDuration: 800,
  liquidFillEasing: "ease-out",
  liquidFillOnHover: true    // Trigger on hover instead of click
}}

// 3. Magnetic Field Settings
clickEffect={{
  magnetic: true,
  magneticStrength: 0.5,    // Pull strength (0.1 to 1)
  magneticRadius: 100,      // Detection radius in pixels
  // Combines well with other effects:
  glitch: true,
  particles: true
}}

// 4. Pixelation Control
clickEffect={{
  pixelate: true,
  pixelateSize: 16,         // Pixel size in pixels
  pixelateDuration: 1000,    // Animation duration
  pixelateIntensity: 0.5,    // Effect strength
  pixelateEasing: "ease-in-out"
}}