With Spectra, you can use the Buttons block to add multiple buttons in one section. These buttons can be different colors, shapes, sizes, borders, hover effects, and typography. You can control each button separately.
In this article, we’ll talk about the Multi Button block and what you can do with it.
How to add Multiple Buttons Block
To insert the buttons block, click the Toggle block inserter + icon and search for the buttons block.
You’ll see two buttons added by default. You can change the button text to the text of your choice. Also, you add more buttons by clicking on the + icon.
Common Styling Options
By selecting the block, you will be able to see the three vertical three dots. On clicking the dots, navigate to ‘show more settings. Then, the block settings panel will open on the right side of the block editor.
Under the General settings tab, you can set the button alignment, button size, and the gap between the buttons.
The Multi Button widget gives you global styling options that let you style all the buttons together. If you want all buttons to look identical, you can use the settings here.
Individual Styling Options
If you wish to style each button separately, click on the individual button you wish to edit. Then, you can access the styling options for the button on the right side of the block editor. You can control each button through its General settings.
You can add icons before/after text on a button to make it look good. Once you have added the icon, you can remove the text.
Also, you can add a hyperlink to the button, have the option to open the link in a new window, or add ‘no follow to the link. Take a look at the screenshot below.
Spectra Buttons Hover Settings
There are different hover options available for each component of the button under the Style tab.
For example, you can change the color of your button text when a user hovers around it under Text > Hover > Color.
Under Background > Hover > Color, you can change the background color of a button when the user hovers around it.
If you choose the Transparent option, the button will display a transparency effect when hovered over. You can also try out gradient colors for added visual appeal.
How to Add a Single Button without Adding Multiple Buttons
If you would like to add a single button, you can make use of the Button block which prompts users to take action with a group of button-style links. If you need a better understanding, you can watch the attached screencast.
That wraps up this guide! If you encounter any issues with the button options or require further customization assistance, don’t hesitate to reach out to us by leaving a comment below. We’re here to help!