Button
Last updated
Was this helpful?
Last updated
Was this helpful?
You can add a button to a web page as the starting point for actions or enhancements. While they may look like any other button on the page, they can do so much more. For example, you can connect LinkedIn, Slack, and Asana or automate a common task. This guide walks you through the process of creating and configuring a custom button on a webpage.
That's really up to you! You can select an existing button on the page to match the styles, or you can use CSS to give it custom styling options.
Follow these steps to add a button to a web page and configure the button actions.
You'll notice elements turn purple when you hover over them. Click on an existing button. A cloned copy of the button displays on the page in real-time.
Go to the PixieBrix Page Editor below the page, and then edit the name in the Name field if desired. This is the name of the mod, not the text on the button.
In the Configuration section, enter the following information:
Button Text
Location
To change the location of the button on the page, click the green CSS selector arrow and select a new location. The purple highlighted border indicates the selected area. You can also provide your own CSS selectors.
Sites
If you want to increase accuracy and processing speed, you can add the sites where you want the button to display. If you add sites, however, make sure that you add at least one. You can also: • Click the Site, Domain, HTTPS, or All URLs shortcuts to insert URLs automatically. • Click Add Site to add more sites. In most cases, users display the button on one site, but you can enter more than one URL to display it on multiple sites. • Click ABC Text > Remove to remove a site from the list.
Next, go to the Advanced: Item Options section, where you can change the look and feel to match other elements on the page.
This is optional information. In many cases, you may not need to configure any of these settings unless you're trying to do something specific.
Icon
• If the button you cloned originally had an icon, you can select a different icon to change it. • If the button did not have an icon, you can choose one from the drop-down list. Make sure to add the {{{icon}}} - variable in the Template field.
Order/Position
• Select Start to place the button before the button you cloned. • Select End to place the button after the button you cloned.
Template
Use HTML code, CSS classes, and more to customize the button further. You can click on the shortcuts to automatically insert these variables: • {{{icon}}} - Displays an icon on the button. This variable is required if you selected an icon in the Icon field above. • {{{caption}}} - Displays the button caption (name) on the button. • {{{space}} - Adds a space ( ) between the caption and icon.
Target Mode
Select one of the following options:
• eventTarget to pass the button element clicked as the root downstream to the bricks in the pipeline.
• Select document to pass the whole HTML document as the root downstream to the bricks in the pipeline.
Synchronous
Toggle on to prevent users from repeatedly clicking the button while the action is in progress. Toggle off the disable this function.
Show Success Message
Toggle on to display the default success message after the button action completes. Toggle off to prevent the success message from displaying.
Navigate to the page where you want to add a button (e.g., )
Open the .
In the left pane, click New Mod > Button.
If desired, edit the default button text. This is the text that appears on the button.
PixieBrix automatically matches the button’s native style, but you can customize it to your liking. If you prefer to watch, the video walks you through the process.
