Marketing · Gutenberg
CTA Pulsing Button block for WordPress
An animated Call-to-Action button with pulsing ring/glow effects, rich typography, hover colors, icon, badge, and subtext controls.
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
An animated Call-to-Action button with pulsing ring/glow effects, rich typography, hover colors, icon, badge, and subtext controls.
Inspector panels on this block: Button & Link, Button Style, Button Colors, Button Shadow, Pulse Animation, Icon, Badge, Subtext Below Button. Those titles come from index.js, not from a shared template.
Behavior controls: “Button & Link — Alignment” options: Left, Center, Right; “Button Style — Style” options: Solid, Outline, Pill (solid), Pill (outline), Gradient; “Size Preset” options: Small, Medium, Large, Extra Large; “Text Transform” options: None, Uppercase, Capitalize, Lowercase.
Where to find it
Gutenberg inserter → Marketing → search “CTA Pulsing Button” (block name `blockenberg/cta-pulsing-button` in block.json). Style it in the sidebar after insert.
How to use CTA Pulsing Button block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “CTA Pulsing Button”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Button & Link. Set “URL”, “Open in new tab”, “Add rel="nofollow"”, “Button & Link — Alignment”.
- Check the published page. The view script reads HTML data attributes: data-pb-bg-hover, data-pb-text-hover. 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. Saved as `url`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `urlNewTab`. |
| Add rel="nofollow" | On/off toggle in the inspector. Off by default. Saved as `urlNoFollow`. |
| Button & Link — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `alignment`. |
| Button Style — Style | Select control; the chosen value is saved on the block. Options: Solid; Outline; Pill (solid); Pill (outline); Gradient; Ghost (glass). block.json default: solid. Saved as `buttonStyle`. |
| Size Preset | Select control; the chosen value is saved on the block. Options: Small; Medium; Large; Extra Large. block.json default: md. Saved as `buttonSize`. |
| Text Transform | Select control; the chosen value is saved on the block. Options: None; Uppercase; Capitalize; Lowercase. block.json default: none. Saved as `buttonTextTransform`. |
| Padding Vertical (px) | Numeric range control in the inspector. Range 4–48. block.json default: 16. Saved as `buttonPaddingV`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 8–100. block.json default: 36. Saved as `buttonPaddingH`. |
| Border Radius (px) | Numeric range control in the inspector. Pill styles always use full rounding. Range 0–60. block.json default: 50. Saved as `buttonBorderRadius`. |
| Button Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoButton`. |
| Subtext | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSubtext`. |
| Badge Font Size (px) | Numeric range control in the inspector. Range 8–18. block.json default: 11. Saved as `badgeFontSize`. |
| Subtext Spacing Above (px) | Numeric range control in the inspector. Range 4–40. block.json default: 10. Saved as `subtextSpacing`. |
| Gradient Angle (deg) | Numeric range control in the inspector. Range 0–360. block.json default: 135. Saved as `gradientAngle`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–8. block.json default: 2. Saved as `buttonBorderWidth`. |
| Enable Shadow | On/off toggle in the inspector. On by default. Saved as `showButtonShadow`. |
| Horizontal (px) | Numeric range control in the inspector. Range -30–30. block.json default: 0. Saved as `buttonShadowH`. |
| Vertical (px) | Numeric range control in the inspector. Range -20–50. block.json default: 10. Saved as `buttonShadowV`. |
| Blur (px) | Numeric range control in the inspector. Range 0–80. block.json default: 28. Saved as `buttonShadowBlur`. |
| Spread (px) | Numeric range control in the inspector. Range -10–30. block.json default: 0. Saved as `buttonShadowSpread`. |
| Effect | Select control; the chosen value is saved on the block. Options: None; Ring; Double Ring; Ripple; Glow; Wave; Breath; Neon; Heartbeat; Float. block.json default: ring. Saved as `pulseEffect`. |
| Speed (ms) | Numeric range control in the inspector. Lower = faster pulse. Range 600–4000. block.json default: 1800. Saved as `pulseSpeed`. |
| Ring Scale | Numeric range control in the inspector. How far the rings expand (1.0 = no expansion). Range 1.0–3.0. block.json default: 1.45. Saved as `pulseScale`. |
| Ring Count | Select control; the chosen value is saved on the block. Options: Single ring; Double rings. block.json default: single. Saved as `pulseRings`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon Style | Select control; the chosen value is saved on the block. Options: Arrow Right; Chevron Right; Play triangle; Star; Fire; External link. block.json default: arrow-right. Saved as `iconType`. |
| Position | Select control; the chosen value is saved on the block. Options: Left of text; Right of text. block.json default: right. Saved as `iconPosition`. |
| Size (px) | Numeric range control in the inspector. Range 10–40. block.json default: 18. Saved as `iconSize`. |
| Nudge icon on hover | On/off toggle in the inspector. On by default. Saved as `iconMoveOnHover`. |
| Show Badge | On/off toggle in the inspector. Small tag attached to the top-right corner of the button. Off by default. Saved as `showBadge`. |
| Badge Text | Text field in the inspector. block.json default: New. Saved as `badgeText`. |
| Show Subtext | On/off toggle in the inspector. Off by default. Saved as `showSubtext`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-pb-bg-hover, data-pb-text-hover.
When this is the right block
- An animated Call-to-Action button with pulsing ring/glow effects, rich typography, hover colors, icon, badge, and subtext controls — that is the job of CTA Pulsing Button, not a generic content block.
- Use it when you need the editor control labeled “URL”, which exists on this block’s inspector.
- It matches pages about cta, button, pulse.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
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 CTA Pulsing Button block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “CTA Pulsing Button”. It sits under Marketing. After insert, open Button & Link and set “URL”, “Open in new tab”, “Add rel="nofollow"”, “Button & Link — Alignment”.
What makes CTA Pulsing Button different from other Blockenberg blocks?
An animated Call-to-Action button with pulsing ring/glow effects, rich typography, hover colors, icon, badge, and subtext controls. Inspector labels on this block include “URL”, “Open in new tab”, “Add rel="nofollow"”, “Button & Link — Alignment”.
Is the CTA Pulsing Button Gutenberg block free?
Yes. CTA Pulsing Button ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style CTA Pulsing 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 & Link, Button Style, Button Colors, Button Shadow).
Related marketing blocks
CTA Band
Full-width colored band with headline, supporting text and a call-to-action button.
Floating CTA
Fixed-position floating call-to-action button that sticks during scroll. Configurable position, icon, label, and trigger delay.
Button Group
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Card CTA Grid
A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert CTA Pulsing Button from the Gutenberg inserter.