[3.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
[3.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 ...[3.0] Connecting Products to Payment Buttons
Overview This article outlines the steps to connect products created in the "Quiz Cart: #3 Create Products" KB to funnels. This integration allows customers to purchase products directly through the funnel pages. Prerequisites Products created as per ...[3.0] Change Footer Links
This procedure is handy if you want to update existing footer links in the templates you’re using for your funnels. Step # 1 Go to the Pre-Quiz and Post-pages with existing footer links that need to be edited. On the Canvas hover your cursor over the ...[3.0] Setting Up External Redirects
The bucket.io quizzes have the ability to redirect the traffic to an external page after the quiz, this can be accomplished in two different ways: Use External URL Component On the Canvas section use the External URL component: Drag and drop the ...[3.0] Building Customer Journey Flows Using Presets
In Bucket 3.0, we've introduced an exciting feature called "Presets," which allows you to effortlessly create highly effective customer flows using pre-built templates tailored for various industries and goals. This knowledge base article will guide ...