Button Element

Last Update: April 22, 2024

The easy-to-use, and versatile Button Element allows you to add a virtually endless variety of buttons to your site. Read below for an overview of the specific features of the Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Button Element

The Button Element is one of the most commonly used Elements. Buttons are amazingly useful on a website, as you can use them in so many ways. They can link to a website, they can open another page on your own site, they can even open a modal dialog or a Lightbox. You can use them in page content, widget areas, or even in menus. They can be different sizes and colors, they can span the content, and they can link to dynamic content; the options are almost endless.

Buttons are a way of displaying an obvious link. You can link text in your copy, but a button stands out a lot more, and can also be used as a design element.

Typically, they will open a link to another site, or a different page on the same site, but they can also trigger a modal window, or scroll to another part of the page. Buttons can stand out from other content, or they can have the same color as the background and just look like a link.

Just add the Element to any Column, and configure its properties until it displays and links exactly how you wish. There is a full list of element options below, and watch the video above for more inspiration.

Element Options

Note: The Default setting will use the global settings assigned for this element at Avada > Options > Avada Builder Elements > Button. Also, please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Button URLAdd the button's url ex: http://example.com.
Button TextAdd the text that will display on button.
Button Title / ARIA Label AttributeSet 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 AttributesAdd 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. ex: rel='nofollow'.
AlignmentSelect the button's alignment.
Modal Window AnchorAdd 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 VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose 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 ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Button StyleSelect the button's color. Select default to use Global Options values, or custom to use advanced color options below.
Gradient Start ColorControls the start color of the button background.
Gradient End ColorControls the end color of the button background.
Gradient Start PositionSelect start position for gradient.
Gradient End PositionSelect end position for gradient.
Gradient TypeControls gradient type.
Radial DirectionSelect direction for radial gradient.
Gradient AngleControls the gradient angle. In degrees.
Button Text ColorControls the color of the button text, divider and icon.
Button TypeControls the button type.
Button Bevel Color For 3D ModeControls the bevel color of the button when using 3D button type.
Button Border SizeControls the border size. In pixels or percentage, ex: 10px or 10%.
Button Border RadiusControls the border radius. Enter values including any valid CSS unit, ex: 10px.
Button Border ColorControls the border color of the button.
Button SizeControls the button size.
PaddingControls the padding for the button.
TypographyControls the button typography, if left empty will inherit from globals.
Button SpanControls if the button spans the full width of its container.
MarginEnter values including any valid CSS unit, ex: 4%.
IconClick an icon to select, click again to deselect.
Icon PositionChoose the position of the icon on the button.
Icon DividerChoose to display a divider between icon and text.
Hover TransitionSet the transition on hover. Icon effects will only work when an icon is set, icon position switch will only work without icon dividers.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article