Gutenberg Button Block Tutorial

Gutenberg Button Block Tutorial

Table Of Content

The entire objective of adding customization options through Premium Blocks such as Button Block for Gutenberg is to entice your website visitors. Cool and interactive animations of Buttons, make your website stand out from competitors and help in reducing bounce rate.

Check Gutenberg Button Block demo page from here.

  1. Presets: When you drag the block in the editor you will find a presets control under the general setting and choose a different style for the block
  2. Hover Effect: Enable to apply one hover effect on the button: slide, shutter or radial.
    1. Direction: Set slide direction for background: top to bottom, bottom to top, left to right or right to left.
    2. Shutter Direction: Set shutter direction for background button: shutter out horizontal or vertical, scaled shutter vertical or horizontal and titled left or right.
    3. Style: Set radil effect style: radial in or out and rectangle in or out.
  3. Button Size: Set button size from small, medium, large or block.
  4. Icon: Enable to show icon on the button.
    1. Select Icon: Select icon from font awesome library and dashicon.
    2. Icon Position: Set icon position on the before or after of button text.
  5. Open link in new tab: Enable to open a link on new tab.
  6. Align Content: Algin button to left, center or right.

Style Settings for Button Gutenberg Block

Style Button block button and icon.

Button Style for Gutenberg Button Block

  1. Typography: Set typography for button text.
  2. Text Color: Set text color on Normal and Hover.
  3. Background Color: Set background color on hover.
  4. Border Color: Set border color on hover when border style isn't none.
  5. Background Type: Set background classic, gradient or transparent on button text.
  6. Text Shadow
  7. Box Shadow
  8. Border
  9. Padding

Icon Style for Gutenberg Button Block

  1. Size: Set size for icon.
  2. Color: Set icon color on Normal and Hover.
  3. Shadow
  4. Margin

Conclusion

Add stylish buttons to your Gutenberg page using Premium Button Block. Premium Gutenberg button is the best tool to have attractive looking buttons and call to actions. It adds tons of customization options and interactive animations that will make it more notable for your website users.

Related Docs: