Button Element
The Button Element adds a clickable button that links to a page, a file, an anchor on the same page or an external site. It is the usual way to guide visitors to the next step: contact us, download the brochure, see all products.
Buttons follow the button styles from Global Options by default, so every button on the site matches. When one button needs to stand out, you can give it its own gradient, border, size, typography, icon and hover transition, or let it open a lightbox or a modal window instead of a new page.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Button Element
Add the Button Element to any column, enter the Button Text and choose the Button URL. Button Target opens the link in the same tab, in a new tab or in a lightbox. To open a Modal Element instead, enter its class name in Modal Window Anchor; the modal must be on the same page. Turn on Enable Button Hover Text / Icon to show a different text or icon while the visitor points at the button.
On the Design tab, Button Style Default uses the Global Options colors. Choose Custom to set the gradient colors, positions and type, the Button Text Color and the border. Button Type switches between a flat and a 3D look with its own bevel colors. Button Size offers four preset sizes, or custom padding and typography, and Button Span stretches the button across the full width of its column.
Add an Icon with an Icon Position and an optional Icon Divider, then pick a Hover Transition: background slides, text slides, an underline or icon movements. Icon transitions only work when an icon is set, and Icon Switch Position only works without the icon divider.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Button. Change them there to style every Button at once.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Button URL | Add the button’s url for example http://example.com. |
| Button Text | Add the text that will display on the button. |
| Enable Button Hover Text / Icon | Turn on to enable independent hover text and icon options. |
| Button Hover Text | Add the text that will display on button hover. |
| Button Title / ARIA Label Attribute | Set a title and aria-label attribute for the button. |
| Button Target | _self = open in same browser tab, _blank = open in new browser tab. |
| Button Additional Attributes | Add additional attributes to the anchor tag. Separate attributes with a whitespace and use single quotes on the values, doubles don’t work. If you need to add square brackets, [ ], to your attributes, please use curly brackets, { }, instead. They will be replaced correctly on the frontend. for example rel=’nofollow’. |
| Enable ARIA Role Button | Turn on for accessibility reasons, if your button does not use standard link behavior, but triggers an action like opening an Off-Canvas or a Modal. |
| Alignment | Select the button’s alignment. |
| Modal Window Anchor | Add the class name of the modal window you want to open on button click. NOTE: The corresponding Modal Element must be added to the same page. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
| Attributes | Add custom HTML attributes to the element. |
Design
| Heading | Description |
|---|---|
| Button Style | Select the button’s color. Select default to use Global Options values, or custom to use advanced color options below. |
| Gradient Start Color | Controls the start color of the button background. |
| Gradient End Color | Controls the end color of the button background. |
| Gradient Start Position | Select start position for gradient. |
| Gradient End Position | Select end position for gradient. |
| Gradient Type | Controls gradient type. |
| Radial Direction | Select direction for radial gradient. |
| Gradient Angle | Controls the gradient angle. In degrees. |
| Button Text Color | Controls the color of the button text, divider and icon. |
| Button Type | Controls the button type. |
| Button Bevel Color For 3D Mode | Controls the bevel color of the button when using 3D button type. |
| Button Hover Bevel Color For 3D Mode | Controls the hover bevel color of the button when using 3D button type. |
| Button Border Size | Controls the border size. In pixels or percentage, for example 10px or 10%. |
| Button Border Radius | Controls the border radius. Enter values including any valid CSS unit, for example 10px. |
| Button Border Color | Controls the border color of the button. |
| Button Size | Controls the button size. |
| Padding | Controls the padding for the button. |
| Typography | Controls the button typography, if left empty will inherit from globals. |
| Button Span | Controls if the button spans the full width of its container. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Icon | Click an icon to select, click again to deselect. |
| Hover Icon | Click an icon to select, click again to deselect. |
| Icon Position | Choose the position of the icon on the button. |
| Icon Divider | Choose to display a divider between icon and text. |
| Hover Transition | Set the transition on hover. Icon effects will only work when an icon is set, icon position switch will only work without icon dividers. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Write button text that says what happens, such as “Download the price list”, rather than “Click here”. It helps visitors and search engines.
- A button that opens in a new tab gets
rel="noopener noreferrer"automatically. Add further attributes, such asrel='nofollow', in Button Additional Attributes, using single quotes. - Turn on Enable ARIA Role Button when the button opens a modal or an off-canvas panel instead of going to another page, so screen readers announce it correctly.
- Button Title / ARIA Label Attribute replaces the name that screen readers read out. Include the visible button text in it, so voice control users can still activate the button by its label.
- The gradient and border color options only take effect when Button Style is set to Custom; the bevel colors only with the 3D Button Type.