Effects · Gutenberg
Creative Button block for WordPress
A single button with 6 advanced hover effect styles — fill slide, color wipe, 3D press, arrow reveal, ripple, and outline morph. Perfect for standout calls-to-action.
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 single button with 6 advanced hover effect styles — fill slide, color wipe, 3D press, arrow reveal, ripple, and outline morph. Perfect for standout calls-to-action.
Inspector panels on this block: Button, Style & Effect, Icon, Sizing. Those titles come from index.js, not from a shared template.
Behavior controls: “Button Style” options: Filled (solid), Outline, Ghost (no border), Gradient; “Hover Effect” options: Slide — background wipes in, Fill — expands from center, Outline — inverts on hover, 3D Press — button depresses, Arrow — arrow slides in; “Corners” options: Sharp, Rounded, Pill; “Icon Position” options: Left, Right.
Where to find it
Gutenberg inserter → Effects → search “Creative Button” (block name `blockenberg/creative-button` in block.json). Style it in the sidebar after insert.
How to use Creative Button block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Creative Button”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Button. Set “URL”, “Open in New Tab”, “Centered”, “Full Width”.
- 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 |
|---|---|
| URL | Text field in the inspector. block.json default: #. Saved as `url`. |
| Open in New Tab | On/off toggle in the inspector. Off by default. Saved as `openNewTab`. |
| Centered | On/off toggle in the inspector. On by default. Saved as `centered`. |
| Full Width | On/off toggle in the inspector. Off by default. Saved as `fullWidth`. |
| Button Style | Select control; the chosen value is saved on the block. Options: Filled (solid); Outline; Ghost (no border); Gradient. block.json default: filled. Saved as `buttonStyle`. |
| Hover Effect | Select control; the chosen value is saved on the block. Options: Slide — background wipes in; Fill — expands from center; Outline — inverts on hover; 3D Press — button depresses; Arrow — arrow slides in; Ripple — click wave effect. block.json default: slide. Saved as `hoverEffect`. |
| Corners | Select control; the chosen value is saved on the block. Options: Sharp; Rounded; Pill. block.json default: rounded. Saved as `corners`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon Position | Select control; the chosen value is saved on the block. Options: Left; Right. block.json default: right. Saved as `iconPosition`. |
| Icon Size (px) | Numeric range control in the inspector. Range 10–32. block.json default: 16. Saved as `iconSize`. |
| Horizontal Padding (px) | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `paddingH`. |
| Vertical Padding (px) | Numeric range control in the inspector. Range 4–40. block.json default: 14. Saved as `paddingV`. |
| Border Width (px) | Numeric range control in the inspector. Range 0–6. block.json default: 2. Saved as `borderWidth`. |
| Typography — Button | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBtn`. |
| Button BG | Color control in the inspector. block.json default: #7c3aed. Saved as `bgColor`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
| Hover BG | Color control in the inspector. block.json default: #4f46e5. Saved as `hoverBg`. |
| Hover Text | Color control in the inspector. block.json default: #ffffff. Saved as `hoverColor`. |
| Colors — Border | Color control in the inspector. block.json default: #7c3aed. Saved as `borderColor`. |
| Gradient Start | Color control in the inspector. block.json default: #7c3aed. Saved as `gradientFrom`. |
| Gradient End | Color control in the inspector. block.json default: #2563eb. Saved as `gradientTo`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A single button with 6 advanced hover effect styles — fill slide, color wipe, 3D press, arrow reveal, ripple, and outline morph. Perfect for standout calls-to-action — that is the job of Creative Button, not a generic content block.
- Use it when you need the editor control labeled “URL”, which exists on this block’s inspector.
- 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 Creative Button block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Creative Button”. It sits under Effects. After insert, open Button and set “URL”, “Open in New Tab”, “Centered”, “Full Width”.
What makes Creative Button different from other Blockenberg blocks?
A single button with 6 advanced hover effect styles — fill slide, color wipe, 3D press, arrow reveal, ripple, and outline morph. Perfect for standout calls-to-action. Inspector labels on this block include “URL”, “Open in New Tab”, “Centered”, “Full Width”.
Is the Creative Button Gutenberg block free?
Yes. Creative Button ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Creative 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, Style & Effect, Icon, Sizing).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
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
Install Blockenberg from WordPress.org, then insert Creative Button from the Gutenberg inserter.