Buttons

Spectra provides a Multi Buttons block that allows you to add multiple buttons within a single section. Further, you can individually style these buttons, while keeping them grouped in one block at the same time.

In addition, you can add any number of buttons, each with different colors, shapes, sizes, borders, hover colors, and typography. Have a look at the demo here.

These are key features of Multi Buttons block:

• Multiple Buttons
• Individual Styling Options
• Individual Button Control
• Hover color options
• Responsive Support

Buttons Block Settings

Firstly, you can set how your whole buttons block will look. Thus, under the \”General\” options, you will find the following settings:

• Alignment: choose between None, Left, Center, or Right;
• Spacing: set the Gap Between Buttons;
• Stack on: choose a breakpoint on which you wish to stack the buttons: Desktop, Tablet, or Mobile. By default, buttons will display inline on all devices;
• Typography: set the Font Family and Font Weight for all your buttons within the block.

Individual Button Settings

Once you click on the Buttons block, you can add as many individual buttons as you need. Similar to adding any other block, add buttons by clicking the “+” icon within the Buttons block.

Individual Button Styling Options

The individual button can be customized completely. Below are the options under each button setting tab –

• Link
• Inherit from the Theme
• Button Icon
• Color Settings
• Top and Bottom Padding
• Left and Right Padding
• Border Style
• Border Thickness
• Rounded Corners
• Font Size
• Line Height

Under the ‘Style’ tab, you can set the button’s typography, border, box shadow, and background color.