Multi Button is an interactive element of Bricks Ultra. It adds a set of buttons to your website to give it a more attractive and trendy look. You can add as many buttons as you want.
Buttons
By default, there are two buttons available. And, you can add more buttons as per your need. To add more buttons click on add item.
- Text: Enter the button text. You can select text dynamically too.
- Link: Specify the destination for the button’s link.
- Icon: Choose the Icon from the given set of libraries.
- Icon position: Set the Icon position to appear before or after the button text.
- Icon size: Set the size of the Icon.
- Separator icon: Set the separator icon. It separates two buttons.
- Separator text: Enter the Separator text. It acts as a separator like an icon.
- CSS ID and CSS Class: Add Class and ID, if you want to apply custom CSS to the buttons.
Custom Style
- Custom Style: Enable to apply custom CSS to individual buttons.
- Animation Style: Set animation of a button. Like swipe, bounce, top, bottom etc.
- Typography: Set font type, size, weight, etc, of a particular button.
Normal
- Text Color: Choose the text color of a particular button.
- Icon Color: Choose the icon color of a particular button.
- Background: Set the background image/color of the particular button.
Hover
Styling controls for the hover state are available under this section.
Border: Set the border and border radius to the button.
Shadow: Add a box shadow effect around the button box.
Transform
- Skew-x: Enter a value (in degrees) to tilt the button from the x-axis.
- Skew-y: Enter a value (in degrees) to tilt the button from the y-axis.
Separator
- Size: Set the size of the button separator.
- Icon size: Set the size of the Icon or text you have chosen as a separator.
- Color: Choose the color of that separator icon.
- Background: Choose the background image/color.
- Border: Set the border and border radius to the separator.
- Shadow: Add a box shadow effect around the separator.
Layout
- Layout: Set the horizontal or vertical layout position of the buttons.
- Align: Align the button to the start, Center or end.
General Styles
Global settings that will reflect on all buttons.
- Animation Style: Set the animation of buttons like swipe left, bounce, top, bottom etc.
- Spacing: Adjust the amount of space between two buttons.
- Padding: Change the padding of the button.
- Background Color: Choose the background color.
- Box Border: Set the border and border radius to the button.
- Box Shadow: Add a box shadow effect around the button.
Box Transform:
- Skew-x: Enter a value (in degrees) to tilt the button from the x-axis.
- Skew-y: Enter a value (in degrees) to tilt the button from the y-axis.
Button Style
Normal
- Text Color: Choose the text color of the buttons.
- Icon Color: Choose the icon color of the buttons.
- Background: Set the background image/color of the buttons.
Hover
Styling controls for the hover state are available under this section.
Border: Set the border and border radius to the Buttons radius.
Shadow: Add a box shadow effect around the buttons.
Transform
- Skew-x: Enter a value (in degrees) to tilt the buttons from the x-axis.
- Skew-y: Enter a value (in degrees) to tilt the buttons from the y-axis.
Separator styles:
- Size: Set the separator size of the buttons.
- Icon size: Set the Icon/text size of the separator.
- Color: Choose the color of that separator icon.
- Background: Choose the background image/color.
- Border: Set the border and border radius to the separator.
- Shadow: Add a box shadow effect around the separator.
Click here to check out a demo page of Multi Button element.