Effects · Gutenberg
Confetti Button block for WordPress
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Inspector panels on this block: Button Text, Link, Confetti Settings, Button Style, Button Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Confetti style” options: 🎉 Burst (from button), 🌧 Rain (from top), 🎊 Sides (from left+right), 🚀 Cannon (angled up), 🌀 Spiral; “Particle shapes” options: Mixed (rectangles + circles), Rectangles only, Circles only, Stars; “Text alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Confetti Button” (block name `blockenberg/confetti-button` in block.json). Style it in the sidebar after insert.
How to use Confetti Button block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Confetti Button”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Button Text. Set “Button label”, “Show sub-text”, “Sub-text”, “URL (leave empty for click-only)”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Button label | Text field in the inspector. block.json default: 🎉 Celebrate!. Saved as `text`. |
| Show sub-text | On/off toggle in the inspector. Off by default. Saved as `showSubText`. |
| Sub-text | Text field in the inspector. Saved as `subText`. |
| URL (leave empty for click-only) | Text field in the inspector. Saved as `url`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `openInNewTab`. |
| Confetti style | Select control; the chosen value is saved on the block. Options: 🎉 Burst (from button); 🌧 Rain (from top); 🎊 Sides (from left+right); 🚀 Cannon (angled up); 🌀 Spiral. block.json default: burst. Saved as `confettiStyle`. |
| Particle shapes | Select control; the chosen value is saved on the block. Options: Mixed (rectangles + circles); Rectangles only; Circles only; Stars. block.json default: mixed. Saved as `shapes`. |
| Particle count | Numeric range control in the inspector. Range 20–500. block.json default: 120. Saved as `particleCount`. |
| Spread angle | Numeric range control in the inspector. Range 10–180. block.json default: 70. Saved as `spread`. |
| Gravity | Numeric range control in the inspector. Range 0.1–3. block.json default: 1. Saved as `gravity`. |
| Particle size (px) | Numeric range control in the inspector. Range 4–24. block.json default: 8. Saved as `particleSize`. |
| Duration (ms) | Numeric range control in the inspector. Range 500–8000. block.json default: 3000. Saved as `duration`. |
| Allow repeat clicks | On/off toggle in the inspector. On by default. Saved as `repeat`. |
| Text alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align`. |
| Full width | On/off toggle in the inspector. Off by default. Saved as `fullWidth`. |
| Max width (px) | Numeric range control in the inspector. Range 100–800. block.json default: 400. Saved as `maxWidth`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–100. block.json default: 12. Saved as `buttonRadius`. |
| Vertical padding (px) | Numeric range control in the inspector. Range 4–48. block.json default: 16. Saved as `buttonPaddingV`. |
| Horizontal padding (px) | Numeric range control in the inspector. Range 8–120. block.json default: 40. Saved as `buttonPaddingH`. |
| Button shadow | On/off toggle in the inspector. On by default. Saved as `showShadow`. |
| Button Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoButton`. |
| Button background | Color control in the inspector. block.json default: #6366f1. Saved as `buttonBg`. |
| Button hover background | Color control in the inspector. block.json default: #4f46e5. Saved as `buttonHoverBg`. |
| Button text | Color control in the inspector. block.json default: #ffffff. Saved as `buttonColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Drawing happens on a canvas element after the page loads.
When this is the right block
- A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings — that is the job of Confetti Button, not a generic content block.
- Use it when you need the editor control labeled “Button label”, which exists on this block’s inspector.
- It matches pages about confetti, button, celebration.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Confetti Button block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Confetti Button”. It sits under Effects. After insert, open Button Text and set “Button label”, “Show sub-text”, “Sub-text”, “URL (leave empty for click-only)”.
What makes Confetti Button different from other Blockenberg blocks?
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings. Inspector labels on this block include “Button label”, “Show sub-text”, “Sub-text”, “URL (leave empty for click-only)”.
Is the Confetti Button Gutenberg block free?
Yes. Confetti Button ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Confetti Button to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Button Text, Link, Confetti Settings, Button Style).
Related effects blocks
Magnetic Button
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
Mouse Trail
Add a magical cursor trail effect to your page — sparkles, dots, comets, ribbons, stars, or fire. Works globally across the page or scoped to a specific section. No dependencies, pure canvas.
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Cursor Spotlight
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Confetti Button from the Gutenberg inserter.