Button Block Tutorial


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.

Before downloading though, why don't you see a live demo and get a feel of the different types of buttons from here? You will surely be impressed!

All Key Features are mentioned below:

Key Features

  • General Settings
  • Text Style
  • Button Style
Main Settings for Button Block

1. General Settings Options

General Settings allows you to change Hover effect, its corresponding setting and Button size. It gives you with the flexibility to changing the size and animation options for your button. You will notice that once you change the Hover effects, settings related to each effect will also change as every effect is different in animations. You can also choose to open link in a new tab. Here are all options:

  • Hover Effect
    • None
    • Slide
    • Shutter
    • Radial
  • Direction/Shutter Direction/Style
  • Button Size
    • Small
    • Medium
    • Large
    • Block
General Settings.

2. Text Style Options

Within this option of Premium Button Block for Gutenberg, you can easily adjust Font, Color and Text Shadow options. All of them are listed below:

  • Font
  • Colors
  • Text Shadow
    • Shadow Color
    • Blur
    • Horizontal
    • Vertical
Text Style options.


Font settings for Premium Button Block provides you with the flexibility of changing size, weight and style of the text in button. Customize the following options to achieve the desired level of looks for your button:

  • Font Size (PX)
  • Font Weight
  • Style
    • Normal
    • Italic
  • Uppercase
  • Letter Spacing (PX)
  • Line Height (PX)
Font options.


In Color options for Premium Button Block, you can change color not only for the text, but also for the text hover. This way, you can add a nice animation of two different colors so that your button stands out on your website. Try a combination that you think works great, and keep on changing until you settle on the perfect one:

  • Text Color
  • Text Hover Color
Text Color options.

Text Shadow

Adding shadows through coding and CSS is now a thing of the past. You get all Text Shadow options such as color, orientation and blur within Premium Button Gutenberg Block to add a 3D appeal to the button. Here are all options:

  • Shadow Color
  • Blur
  • Horizontal
  • Vertical
Text Shadow options

3. Button Style Options

Button Style options allows you to customize the button according to your design requirements. This includes changing color, setting up border, adding shadows and adjusting spacings. Here are all options:

  • Colors
  • Border
  • Shadow
  • Spacings
Button Style Options


You get to change two options in Colors, Background Color, and Background Hover Color. Both can be changed easily of Button Premium Block for Gutenberg as follows:

  • Background Color
  • Background Hover Color
Color options.


There are two options that you can change for the Border. These include Border Type and Radius.

  • Border Type
  • Border Radius
Border Options.


Within this option, you can add shadow to the Premium Button Block. Simply select the Shadow Color, and adjust sliders for shadow orientation. You can even adjust the Position from Inset to Outline as follows:

  • Shadow Color
  • Horizontal
  • Vertical
  • Blur
  • Position
    • Inset
    • Outline


The Padding option allows you to increase or decrease the actual size of Premium Button Block proportionately. If you adjust the slider, you will notice a proportionate increase/decrease in width and height of Button size.

Spacings Options.

Related Docs: