The Smart Button Block lets you create customizable buttons with flexible orientation, spacing, alignment, and advanced styling options for full design control. 

Here are some of the key features of this block: 

• Global Customization for the Smart Button Block 
• Three Button Styles with Six Hover Effects  
• Background, Border, and Shadow for Normal and Hover States 
• Custom Link Support with New Tab Option 
• Customizable Button Label and Icon 
• Device-specific Show/Hide Controls 
• Custom CSS for Advanced Styling 

Let us explore the Smart Button Block

Using the Smart Button (Parent Block) 

When you add the Smart Button Block to your WordPress page, global customization options will appear on the right side of the screen as the General Tab and the Advanced Tab. It is added as a parent block. You can add as many buttons as you want and apply global settings to the entire button group. All the buttons are added as a child block.

General Settings – Horizontal Tab

Full Width Buttons: Use this option to make the buttons span the full width of the block.

Button Gap: Adjust the empty space between each button.

Horizontal Alignment: Align the button or button group to the left, center, or right.

Margin: Adjust the outer spacing around the entire block.

General Settings – Vertical Tab 

Full Width Buttons: Use this option to make the buttons span the full width of the block.

Button Gap: Adjust the empty space between each button.

Vertical Alignment: Align the buttons to the top, middle, or bottom of the block.
Margin: Adjust the outer spacing around the entire block.

Advanced 

The Advanced settings panel allows you to set the visibility of the block for different devices and add Custom CSS for more styling. 
Using the Smart Button (Child Block) 
After adding the Smart Button Block, click on the Smart Button, and more customization options will appear on the right side of the screen. The button is added as a child block. Customize the button as you prefer. Then, save or publish the page and see the changes on the frontend. 

General Settings 

Button Style: Choose from a set of predefined styles for your button, such as Default, Ghost, and Gradient.

Hover Effects: Select an animation that appears when a user’s mouse hovers over the button.

Normal: The default appearance of the button.

Hover: The appearance of the button when a user’s mouse is over it.

Background Color: Change the color of the button’s background.

Box Shadow: Add a shadow effect to the button.

Border: Add and style an outline around the button.

Border Radius: Control the roundness of the button’s corners.

Button Link: Set the URL that the button will link to.

Open in New Tab: Use the option to make the link open in a new browser tab.

Padding: Adjust the inner spacing between the text and the button’s edges.

Button Label Settings 

Button Label: The text that is displayed on the button.

Typography: Options to change the font, size, and style of the button’s text.

Normal: The default appearance of the button text.

Hover: The appearance of the button text when a user’s mouse is over it.
Color: Change the color of the button’s text.

Icon Settings 

Icon: Enable the option to display an icon on the button.
Icon Styles: Choose the icon you prefer from here. 10 icon styles are available. 

Icon Gap: Adjusts the space between the icon and the button’s text.
Icon Position: Sets the placement of the icon to the “Left” or “Right” of the button’s text.

Advanced 

The Advanced settings panel allows you to set the visibility of the block for different devices and add Custom CSS for more styling.