Dive into dynamic web design with the Gutenberg Buttons Block by Premium Blocks—a powerful and flexible solution for creating engaging, action-driven buttons on your WordPress site. Whether you want to direct visitors to key pages, highlight calls to action, or promote special offers, this block integrates seamlessly with the Gutenberg editor for an intuitive editing experience. Easily control button spacing, alignment, and group layout, then take customization further with advanced styling options. From typography and colors to margins and padding, you can fine-tune every detail to ensure your buttons align perfectly with your website’s design and capture user attention with every click.
Upon activating Premium Blocks, you can enhance your Gutenberg editor by inserting the Premium Buttons Block. You have multiple options for customization: select from an extensive icon droplist, choose an image from the Media Library, upload a new one, add an SVG file, or incorporate a Lottie animation. These features allow you to create a visually dynamic Gutenberg Buttons Block element.
General Settings
Gap Between Buttons: Control the space between individual buttons, with a slider to adjust the value.
Alignment: Choose the alignment of the buttons within their container (left, center, or right).
Group Alignment: Set the overall alignment of the button group either horizontally or vertically within its section or column.
Zoom on Image for the Gutenberg Buttons Block – General Settings
Gutenberg Buttons Blocks’ Style
Gutenberg Buttons Blocks’ Style provides advanced styling options to enhance the visual appeal of your button groups, including typography, margins, and padding, allowing for a cohesive and tailored appearance across your site.
Typography: Adjust the font settings for the text on the buttons.
Margin: Control the space outside the borders of the button group, with the ability to set different values for top, right, bottom, and left.
Padding: Set the space inside the borders of the button group, also with individual values for each side.
Click on the image to Show Gutenberg Buttons Block Styling Controls
Single Button Layout
General Settings
Button Types: Choose from various button styles, such as Fill Color, Outline, Fill with Icon, Outline with Icon, Rounded Fill, Rounded Outline, Circled Fill, Circled Outline, and Plain.
Hover Effect: Select from different hover effects to enhance interactivity.
Gutenberg Buttonsblock – Single Button Settings
Button Size: Adjust the size of the button (e.g., Small, Medium, Large).
Width Settings: Set the button width to percentages like 25%, 50%, 75%, or 100%.
Icon: Enable this option to add an icon to your button.
Type: Choose the icon type you want to use: Icon, Image, SVG, or Lottie—to best suit your button design.
Select: Choose an icon from the library, upload an image or SVG, or add a Lottie animation URL.
Icon position: Set the icon position, before or after the button text.
URL: Add the destination URL for the button.
Open Link in New Tab: Toggle on if you want the link to open in a new tab.
No follow :Use to stop search engines from passing page authority to a linked destination.
Gutenberg Buttonsblock – Single Button Settings
Style Settings
Button :
Typography: Customize the text typography, including font, size, and weight.
Text Color: Set the text color for both normal and hover states.
Background Type: Choose a solid color, gradient, or image background.
Box Shadow: Add shadow effects to give the button a 3D appearance for both normal and hover states.
Gutenberg Buttons Block – Single Button Styling Options.
Text Shadow: Apply shadow to the text for an enhanced look.
Border: Customize the border style, width, and color.
Border Radius: Adjust the border radius to make the button corners rounded.
Margin: Set the margin around the button.
Padding: Adjust the padding inside the button to control the spacing around the text.
Gutenberg Buttons Block – Single Button Styling Options.
Icon:
Appears only when the icon is enabled on the button from the layout tab.
Size: Set the icon size
Color : Set the Icon color for both normal and hover states.
Background Type: Choose a solid color, gradient, or image background.
Border: Select from solid, dashed, dotted, or double borders
Border Width: The thickness of the border.
Border color: Select The color of the border
Border Raduis: Add Rounds the corners of the border
Margin : adding Space outside the icon, separating it from surrounding content.
Pending: adding Space between the icon and the icon’s border inside the button
Gutenberg Buttons Block – Icon Styling Options.
Conclusion
In conclusion, the Gutenberg Buttons Block is more than just a functional element—it plays a key role in driving user engagement across your WordPress site. With intuitive controls for spacing, alignment, and advanced styling, you can create buttons that are both visually compelling and highly effective. Whether you’re directing traffic, highlighting promotions, or adding dynamic interactions to your pages, this block helps you achieve your goals with precision, consistency, and ease.
Need Further Help?
Have a question or need assistance? Premium Blocks dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.
