Skip to main content

Button

Introduction​

The Button module in Builderius is a powerful element designed to create interactive buttons on your website or application. As a semantic container, the Button module represents a clickable button that triggers an action or event when clicked. With the Button module, you can easily add interactive elements that encourage user engagement and improve the overall usability of your website or application. Button elements are focusable elements, and work both for mouse based click events as well as pressing Enter or Spacebar key on a keyboard. While Anchor module can on its own open some desired target, Button relies on additional work to perform an action, this can be a form element in which it is placed or JavaScript code.

When you insert the Button module into the canvas, it automatically generates a <button> HTML tag. This tag represents a clickable button that can be used for form submissions, user interactions, or other custom actions. It is important to distinguish between the <button> and <a> elements. Unrelated to how you style these elements, buttons are meant for submitting form requests, toggle open (or close) previously hidden elements, update views, traverse slides and similar while the link should be used to open new pages, or travel to sections on a page.

Standard Module Settings​

The Button module shares standard settings with other Builderius modules, making it easy to adapt and use across your designs. Once you learn how to use Button you know how to use other modules as well. These settings are divided into two main sections: Data Settings and CSS Settings. Let's explore each in detail.

Data Settings​

Module data settings

Content​

The Content section allows you to define the textual content to be displayed inside the Button module. You can enter simple static text, utilize HTML markup (with autocomplete), and use dynamic data template tags to display information from the WordPress database, JSON, or other data source. Remember, you can nest child modules within this module to create complex content structures.

Type​

This dropdown allows you to choose a type of a Button you want to create. Choose from:

  • Button <button>
  • Submit <button type=”submit”>
  • Reset <button type=”reset”>

HTML Attributes​

In this section, you can add various attributes to the module's HTML code. These attributes enable you to label or modify the behavior of the module. There are three types of attributes you can work with:

Module html attributes

Classes​

Add multiple classes to apply styles (e.g., color, size, spacing) to multiple modules simultaneously.

ID​

Assign a unique ID name to identify this module distinctively. IDs are commonly used for in-page linking or establishing relationships between different modules on the page.

Custom Attributes​

Create custom attributes, such as aria- type attributes for screen reader accessibility or data- type attributes to extend module functionality. You can define both the attribute name and its value.

Conditions​

The Conditions section allows you to set server-side conditions for displaying the Button module. These conditions are processed before the page is generated, meaning that if the conditions are not met, the module will not appear on the page. Conditions are a powerful way to customize what content appears based on various factors. For more information on conditions, refer to our documentation on conditions.

Module conditions

CSS Settings​

Module CSS settings

Creating media queries​

Module creating new media query

Creating pseudo CSS selectors​

Module pseudo selectors

Creating custom CSS selectors​

Module adding CSS selector

The CSS Settings area provides extensive control over the design and styling of the Button module. You can craft the appearance of the module using various CSS methods. The CSS Settings are organized under several subsections:

CSS Variables​

Create CSS variables to ensure consistent styles across the Button module and its submodules. Various types of CSS variables are supported, including integer, number, color, image, percentage, length, angle, time, and any value.

Creating CSS Variables​

Module CSS variables

Using CSS Variables​

Module using CSS variables

Layout​

Control the module's layout using CSS methods such as flexbox and grid, among others.

Positioning​

Adjust the positioning of the module using position methods like fixed, absolute, relative, and more.

Size​

Manage the size and spacing of the Button module to achieve the desired visual effect.

Typography​

Control the presentation of text within the module using typographic CSS properties like font-size, line-height, letter-spacing and more.

Border​

Design borders and outlines to enhance the module's appearance.

Background​

Apply color, gradients, or images to the module's background as per design needs.

Extra​

Additional settings can be found here, offering more customization options.

Examples and Use Cases​

To better understand the potential of the Button module, let's explore some practical examples and use cases. These examples will showcase how you can utilize this module to create various elements for your website or application.

Video coming soon

Additional Resources​

For more in-depth information the Button module, refer to the following resources:

Conclusion

Congratulations! You've learned about the Button module and its essential settings in Builderius. Armed with this knowledge, you can now create any kind of html element to enhance your website or application. Experiment, explore, and unleash your creativity with the Button module!