Button Group element lets you add a series of buttons together. It gives better designing options for a call to action button.
Just like our other JD Builder elements this element also has options divided between General tab and Design tab.
Firstly we’ll discuss the options under General tab where the only main option under Basic tab is of adding the Buttons in the group.
Now each button has its own set of styling option that are described below:
- Button Text- Enter the button text.
- Link- Add a button link if you want.
- Custom Class- Add a specific button CSS styling to the button.
- Button Type- Choose the button type whether Primary or Secondary or any other.
- Button Animation- Set the button’s individual animation.
- Button Icon settings- Add icon on the button and style it accordingly with the options provided.
- Button Text, Border & Background colors- Add your button’s text, border and background colors from the color pickers.
- Button Shadow- Add button’s shadow on normal state.
- Hover Button & Border colors- Add your button’s text, border and background colors when on hover.
- Hover Button Shadow- Add button shadow when in hover state.
Next under the main Design tab we have options to style all the button added, in similar styles altogether. There are 2 sub tabs here Button and Styling that has the following options:
Under the Button tab we have these options:-
- Button size- Set the size of the button whether small, medium or large.
- Button Padding- Add padding to the buttons if required.
- Button Typography- Set the typography of the buttons text.
- Button Animation- Set the same animation on all the buttons.
Under the Styling tab we have these options:-
- Button Text, Border & Background colors- Add all your buttons text, border and background colors from the color pickers.
- Button Shadow- Add buttons box shadow on normal state.
- Hover Button & Border colors- Add your buttons text, border and background colors when on hover.
- Hover Button Shadow- Add buttons box shadow when in hover state.
- Alignment- Set the overall alignment of all the buttons together
- Space Between- Add the space between each of the button added.
- Stack On- Choose when to stack on the buttons be it desktop, tablets or mobiles.
