Submit Button Element

Last Update: September 10, 2025

The Avada Submit Button Element is the final action trigger in a form, enabling users to submit their entered information once it is complete. It can be fully customized in terms of text, color, size, shape, alignment, and hover effects, ensuring it fits seamlessly with your site’s design. The Submission Type for your Submit Button is controlled in the Avada Form Options.

Watch the video below for a visual overview of Avada Form Builder Elements, and view the Avada Submit Button Element page. Read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.
View Element Page!
View Live Example!
View Form Builder Elements!

How To Use The Avada Submit Button Element

The Avada Submit Button Element allows you to place a submit button into your forms. To start, add the element to your desired Column in an Avada Form Layout.

Go through the options to populate and configure the Button. This is essentially the same as configuring any button, except for the Link options, of course. Read below for a description of all Element options.

Element Options

Location: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).

Note: Please note that the displayed options 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 TextAdd the text that will display on button.
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.
Tab IndexTab index for this field.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.
Form IDContains active form ID.

Design

HeadingDescription
Button StyleSelect the button's color. Select default or color name for Global Options, or select custom to use advanced color options below.
Gradient Top ColorControls the top color of the button background.
Gradient Bottom ColorControls the bottom 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.
Conditional LogicAdd conditional logic when the element is used within a form.

In this article