The Buttons Block allows you to create a collection of customizable buttons arranged in either horizontal or vertical layouts. This block is perfect for creating call-to-action sections, navigation elements, or any grouping of clickable buttons on your website.
Adding a Buttons Block
To add a Buttons Block to your page or post:
- Open the WordPress block editor
- Click the “+” icon to add a new block
- Search for “Buttons” or navigate to the DigiBlocks category
- Click on the “Buttons” block to insert it
The block will be inserted with one default button. You can add more buttons by clicking the “Add” button that appears in the bottom-right corner of the block.
Block Structure
The Buttons Block is a container block that holds individual Button blocks. Each button within the container can be customized independently while the container controls the overall layout and spacing.
Options Tab
Layout Settings
Layout Choose how your buttons are arranged:
- Horizontal: Buttons are displayed side by side in a row
- Vertical: Buttons are stacked on top of each other in a column
Alignment Control how buttons are aligned within the container:
- For horizontal layout:
- Top: Aligns buttons to the top of the container
- Center: Centers buttons vertically
- Bottom: Aligns buttons to the bottom of the container
- For vertical layout:
- Left: Aligns buttons to the left
- Center: Centers buttons horizontally
- Right: Aligns buttons to the right
Button Spacing Set the gap between buttons using the responsive range control:
- Desktop: Spacing for screens 992px and wider
- Tablet: Spacing for screens 768px to 991px
- Mobile: Spacing for screens 767px and below
- Range: 0-50 pixels
- Default varies by device for optimal display
Individual Button Configuration
Each button within the Buttons Block can be configured with extensive options:
Icon Settings
Select Icon Choose from thousands of Font Awesome icons using the icon picker:
- Browse by category or search by name
- Preview icons before selection
- Icons automatically inherit text color
Only Icon Toggle to display only the icon without text, perfect for social media buttons or compact layouts.
Icon Position (when text is present)
- Left: Icon appears before the text
- Right: Icon appears after the text
Link Settings
Configure where the button links to:
- URL: Enter the destination URL
- Open in new tab: Toggle to open links in a new browser tab
- Add noopener noreferrer: Security attributes for external links
Button Text
Click on any button to edit its text directly. The text editor supports:
- Direct typing and editing
- Copy and paste functionality
- No formatting options (maintains button styling consistency)
Size and Fill Options
Size Choose from predefined button sizes or create custom dimensions:
- Small: Compact buttons with 8px vertical and 16px horizontal padding
- Medium: Standard buttons with 12px vertical and 24px horizontal padding (default)
- Large: Prominent buttons with 16px vertical and 32px horizontal padding
- Custom: Define your own padding values with full responsive control
Expand to Container Width Enable this option to make buttons stretch to fill the full width of their container, useful for mobile layouts or call-to-action sections.
Style Tab
Typography
Control the text appearance of your buttons:
- Font Family: Choose from web-safe fonts or Google Fonts
- Font Size: Set size with responsive controls (px, em, rem units)
- Font Weight: Control text thickness (100-900, normal, bold)
- Font Style: Normal or italic text
- Text Transform: None, uppercase, lowercase, or capitalize
- Text Decoration: None, underline, line-through, or overline
- Line Height: Control line spacing (px, em, %, unitless)
- Letter Spacing: Adjust character spacing (px, em)
Colors
Configure button colors with separate settings for normal and hover states:
Normal State Colors:
- Text Color: Color of the button text and icon
- Background Color: Button background color
Hover State Colors:
- Text Color: Text color when hovering over the button
- Background Color: Background color when hovering over the button
All color controls include:
- Alpha transparency support
- Color picker with presets
- Clear option to remove colors
Spacing (Custom Size Only)
When “Custom” size is selected, you gain full control over button padding:
- Responsive Controls: Set different padding for desktop, tablet, and mobile
- Individual Sides: Control top, right, bottom, and left padding independently
- Linked Values: Option to apply the same padding to all sides
- Units: Pixels (px), em, rem, or percentage (%)
Margin
Control the external spacing around individual buttons:
- Responsive Settings: Different margins for each device size
- Four-Side Control: Independent control for all sides
- Units Support: px, em, rem, % options
- Negative Values: Supported for advanced layout control
Box Style
Border Style Choose the border appearance:
- Default: No custom border styling
- None: Explicitly removes all borders
- Solid: Continuous line border
- Dotted: Dotted line border
- Dashed: Dashed line border
- Double: Double line border
- Groove: 3D grooved border effect
- Inset: 3D inset border effect
- Outset: 3D outset border effect
- Ridge: 3D ridged border effect
Border Colors (when border style is applied)
- Normal State: Default border color
- Hover State: Border color on hover
- Full alpha transparency support
Border Width (when border style is applied)
- Responsive Control: Different widths for each device
- Individual Sides: Control each border side independently
- Units: Pixels (px) or other CSS units
Border Radius Round the corners of your buttons:
- Responsive Settings: Different radius for each device size
- Individual Corners: Control each corner independently
- Units: Pixels (px) or percentage (%)
- Linked Values: Option to apply uniform radius
Box Shadow
Add depth and visual interest with shadow effects:
Normal State Shadow:
- Enable/Disable: Toggle shadow on or off
- Horizontal Offset: Shadow position on X-axis (-100px to 100px)
- Vertical Offset: Shadow position on Y-axis (-100px to 100px)
- Blur Radius: Shadow softness (0-100px)
- Spread Radius: Shadow size expansion (-100px to 100px)
- Shadow Color: Color picker with alpha support
- Shadow Position: Outer (default) or inset shadow
Hover State Shadow:
- Same controls as normal state
- Creates smooth transition effects
- Independent from normal state settings
Advanced Tab
Animation
Add entrance animations to make buttons appear with visual effects:
- Animation Effect: Choose from various animation types including:
- Fade effects (fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight)
- Slide effects (slideInUp, slideInDown, slideInLeft, slideInRight)
- Zoom effects (zoomIn, zoomInUp, zoomInDown)
- Bounce effects (bounceIn, bounceInUp, bounceInDown)
- Flip effects (flipInX, flipInY)
- And many more options
Animations trigger when the buttons come into the viewport during page scroll.
Visibility
Control when buttons are displayed across different device types:
Hide on Desktop Hides buttons on screens 992px and wider (desktop computers and large tablets in landscape mode).
Hide on Tablet Hides buttons on screens between 768px and 991px (tablets and small laptops).
Hide on Mobile Hides buttons on screens 767px and below (mobile phones and small tablets in portrait mode).
Editor Note: Hidden elements appear with reduced opacity in the editor for easy identification and editing. Visibility changes only take effect on the frontend.
Additional Settings
HTML Anchor Create a unique identifier for the buttons block:
- Used for creating jump links within the page
- Must be unique across the entire page
- Use lowercase letters, numbers, and hyphens only
- No spaces allowed
- Example: “my-buttons” creates a link target at #my-buttons
Additional CSS Class(es) Add custom CSS classes for advanced styling:
- Separate multiple classes with spaces
- Useful for custom CSS styling or JavaScript targeting
- Classes are applied to the buttons container
- Example: “custom-buttons featured-section”
Managing Buttons
Adding Buttons
To add more buttons to your Buttons Block:
- Select the Buttons Block
- Click the “Add” button in the bottom-right corner
- A new button will be added to the collection
- Configure the new button using the same options as described above
Removing Buttons
To remove a button:
- Select the individual button you want to remove
- Press the Delete key or use the block toolbar delete option
- The button will be removed from the collection
Reordering Buttons
To change the order of buttons:
- Select the button you want to move
- Use the up/down arrows in the block toolbar
- Or drag and drop the button to a new position
Best Practices
Layout Considerations
Horizontal Layout:
- Best for 2-4 buttons on desktop
- Consider switching to vertical layout on mobile for better usability
- Ensure adequate spacing between buttons for touch targets
Vertical Layout:
- Ideal for navigation menus or step-by-step processes
- Works well on all device sizes
- Consider full-width buttons for mobile interfaces
Accessibility
Button Text:
- Use clear, descriptive text that explains the button’s action
- Avoid generic text like “Click Here” or “Read More”
- Keep text concise but meaningful
Color Contrast:
- Ensure sufficient contrast between text and background colors
- Test hover states for accessibility compliance
- Consider colorblind users when choosing color schemes
Touch Targets:
- Maintain minimum 44px height for mobile touch targets
- Ensure adequate spacing between buttons on mobile devices
- Test on actual mobile devices for usability
Performance
Icon Usage:
- Icons are loaded efficiently through Font Awesome
- Only selected icons are included in the final page output
- Consider using icons sparingly for better loading performance
Animations:
- Use animations judiciously to avoid overwhelming users
- Test animation performance on slower devices
- Consider reducing animations for users who prefer reduced motion
Design Consistency
Button Hierarchy:
- Use different sizes to establish visual hierarchy
- Primary actions should be more prominent than secondary ones
- Maintain consistent styling across similar buttons
Color Usage:
- Establish a consistent color scheme for different button types
- Use brand colors for primary actions
- Consider button purpose when choosing colors (success, warning, danger)
Common Use Cases
Call-to-Action Sections
Create compelling action areas with multiple button options:
- Primary action (larger, more prominent)
- Secondary action (smaller, less prominent)
- Horizontal layout for desktop, vertical for mobile
Navigation Elements
Build custom navigation with button groups:
- Consistent sizing and spacing
- Clear, descriptive labels
- Appropriate link destinations
Social Media Links
Create social button collections:
- Use icon-only buttons for compact display
- Consistent sizing and spacing
- Brand-appropriate colors
Download Sections
Offer multiple download options:
- Clear labeling of file types or versions
- Consistent styling with size indicators
- Appropriate icons for file types
The Buttons Block provides a flexible and powerful way to create engaging, interactive elements that guide user actions and improve website navigation. With its extensive customization options and responsive controls, you can create button collections that work perfectly across all devices and match your site’s design requirements.