As you can understand from the title of the block – it is a button but with enhanced options and more functionality than before. The beautiful thing about this block is that in can actually show button groups as well, not only one so you can easily have 2-3 buttons in a row.
Buttons are a very important element on a web page so we added additional fields and options for it so you can easily create some great layouts and have some great CTA blocks when you need them, and not only. The button plus element comes with the option to create multiple buttons as mentioned above. For each button you can then have the following settings:
Link
Of couse, any button need a link where to redirect you. This is the first option you will find for each button.
Link target
If you are not familliar with HTML and coding, the link target basically tells the browser how to open the link. There are 2 options provided: open the link in the same window and in a new window.
Text size
The text size for the button can easily be modified from the button settings, so you can create custom sized buttons depending on your layout and how you use them.
Top and Bottom Paddings
A button can have a big spacing above and below the text of can have none. It’s up to you which way you want to go with this. You have the option to choose how much spacing you need between the top part (and bottom) of the text and the edge of the button element itself. Depending on the font size you choose for your button you might want to change these.
Left and Right Padding
The left and right paddings work similar to the top and bottom ones but as you can understand from the title – you can choose how much spacing you want on the right and left side. Our recommendation is that you have 1.5x the size of the Top and Bottom Paddings to get a good UX experience.
Border Thickness
Depending on the button style that you want to use – you might want to have or disable the border completely for the button element. The border thinkness represents how many pixels do you want to add around the button. This is mostly important for ghost buttons (border only that fill with background on hover) or border-only buttons (which only change the color of the border and text, with a transparent background).
Border Radius
Depending on your website style you might want your buttons to be rounded or not. Well, the border radius option is to set how rounded do you want your button corners to be. A higher value will round it more and a smaller value will make them square.
Button Color Settings
As it’s easy to understand from the title – you can also choose the colors which are used for this button. In this section you can choose the button text color, button background color and the border color. Also, there is a tab where you can choose the colors which the buttons should have when hovered. You can check the screenshot below to see how these look and where to find the button hover color settings.
Icon Settings
Any button plus element can have and icon as well. In the block settings you will find the Icon settings panel which provides you with the option to choose from the Stashio Blocks huge icon library and the icon location: left of the text or right of the text.
Font family
We also included an option to choose the font family here, but it applies to the block and not for each button element inside the button plus block. So, if you have 2 buttons inside the Button Plus block – both will have the same font family. You can change this if you want with additional classes.