[2.0] Customizing Buttons
With the bucket 2.0 Builder, buttons can be configured to have many different designs. Follow the steps below to accomplish some of these changes. Note that it is always recommended to start working from the Desktop view and then move to Tablet and Mobile to make further customizations.
1. Button Size
Once a button is selected and the Properties section is open, it will display the Size options. Here it is recommended to configure the Width and Height options as auto, so the button can resize depending on the wording inside the button. Additionally, use the Inner Padding to accomplish a margin or separation between the wording and the borders of the button, this action will increase the size of the button.
2. Font Size and Color
Select the text label, then access the Properties section and find the Font Properties option. Here manually change the font size (e.g. 40px), also the text color can be changed under the Color option (write the name of the color, use Hex Code, RGBA code or select a color from the palette).
3. Button Color
Select the button and locate the Background Color option in the Properties section. In order to change the color of the button, write the name of the color, use Hex Code, RGBA code or select a color from the palette.
4. Button Border
Select the button and locate the Border option in the Properties section.
4.1 Border
Use the Border width and a Border style to set a border to a button (e.g. Border width: 10px Border style: Solid)
4.2 Round Button
By default, a button has a rectangular shape, but the Border options will allow you to transform the rectangular button to a round button by adjusting the Border radius menu. E.g. Top Left: 100px, Top Right: 100px, Bottom Right: 100px, Bottom Left: 100px.
5. Button Shadow
Select the button and locate the Shadow option in the Properties section. Then click on the + icon to enable the shadow options, use Box shadow h (Horizontal) and Box shadow v (vertical) to locate the shadow of the button. E.g. Box shadow h: 5px and Box shadow v: 5px. Lastly play with the Box shadow blur, Box shadow spread and Box shadow color to achieve the desired effect.
6. Add a Link
A redirect link can only be added to buttons located in the last page of a funnel, please refer to the article Change URL to Buttons and Links for further information.
Related Articles
[2.0] Next and Back Buttons
Next and Back buttons can be added in a quiz to provide a flexible flow within questions. Step # 1 In any questions added, click on the Edit on Builder button. Step # 2 Click on the Popup Properties menu located at the left column. Step # 3 Turn on ...[2.0] Hover Effect For Buttons
This feature allows changing the color of buttons when hovering over, it can come in handy when wanting to give a clear signal to see what's clickable. When the audience moves their cursor over a button, they'll notice a color change that tells them ...[2.0] Change URL to Buttons and Links
Using the Link or URL on CTA buttons Click to select the desired button Access the Properties page identified with the tools icon and click Change URL A pop-up should appear with the redirect options, click Web Address to add a URL of the page where ...[2.0] Revert Changes
This new feature will allow users to revert changes - either recover a deleted component or remove again a component that was previously recovered. Therefore, the revert changes action can be accomplished back and forth (Undo and Redo). The Revert ...[2.0] Adding Clickable Links (Hyperlinks)
Click to select the desired Hyperlink Access the Properties page identified with the Tools icon and click Change URL A pop-up should appear with the redirect options, click Web Address to add a URL for this section, or use the Single Page option to ...