Gutenberg Buttons Block Tutorial


Dive into the world of dynamic web design with Gutenberg Buttons Block by Premium Blocks, an essential tool for creating engaging and interactive websites. Whether you’re looking to guide your visitors to important pages or promote special offers, Gutenberg Buttons Block for WordPress sites integrated within the Gutenberg editor offers unparalleled ease of use and flexibility. You’ll have the power to adjust the space between buttons, align them perfectly within their container, and even set the group’s overall alignment. But that’s just the beginning, explore advanced styling options to tailor every aspect of your buttons’ appearance, from typography to margins and padding, ensuring they perfectly match your site’s aesthetic and engage your audience at every click.


To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Buttons Block?

After activating Premium Blocks, The start is as simple as inserting Premium Buttons Block into your Gutenberg editor, then deciding whether to upload an image or select an already existing one by clicking on the “Media Library” to be used as Gutenberg Buttons Block element.

General Settings

General Settings offer fundamental customization options for your Gutenberg buttons, allowing you to adjust spacing, alignment, and group orientation for optimal layout and visual harmony.

  • 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.
Gutenberg Buttons block's gap between buttons, alignment, & group alignment.
Buttons Block for Gutenberg Editor
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.

  • Group Styles: This section is for applying styles to a group of buttons rather than individual buttons.
  • 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.
Gutenberg Buttons Block  Styling Controls such as typography, margin, or padding
Gutenberg Buttons Block Styling Controls


In wrapping up, the Gutenberg Buttons Block transcends being merely a functional feature—it serves as a conduit to bolstering user engagement and aesthetic finesse on your WordPress site. Furnished with intuitive design controls, spanning gap adjustments, alignment tweaks, to a spectrum of styling possibilities, you’re well-equipped to forge buttons that truly captivate. Whether your goal is to steer traffic, spotlight promotional offers, or infuse your pages with a dynamic touch, this block guarantees your aims are achieved with sophistication and operational smoothness. Embrace the transformative capabilities of the Gutenberg Buttons Block, and unlock a realm where your website’s interactive components evolve into compelling calls to action that deeply resonate with your visitors.

Need Further Help?

Have a question or need assistance? Our 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.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks