Button Element

03/12/2018

The Button Element allows you a variety buttons on your site, with a large array of options. Choose from 4 sizes, 3 shapes, flat or 3D style, unlimited colors, border widths, icons, dividers and animations as well as buttons that open modal popups. Read below for an overview of the specific features of the Element.

Button

Get Started
Buy Now
Buy Avada Now
Learn More
Get it now!
View more examples!

How to use the Button Element

Buttons are amazingly useful on a website. 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. You can use them in page content, widget sections, or even in menus. They can be full width, different sizes and colors; the options are almost endless. Let's see how we insert one into a page.

Step 1. Edit an existing page. Ensure the Fusion Builder is activated, by clicking the 'Use Fusion Builder' button on top of the page editor.

Step 2. Choose the Container you wish to add the Button into. Click on Add new Element, at the bottom of the content in the Container.

Step 3. Choose Button from the Elements List.

Step 4. The General Tab is the place to set the links, button text, alignment, and other practical options. The first step is to add the link that the Button will open. This can be a URL, local content, or a Modal dialog. To use a Modal, add the class name of the Modal Window you want to open in the Modal Window Anchor section. For more details on Modals, see the link below. Next, fill out the Button Text (what you want to display on the button) and move down the options.

Step 4. The next step is to design you Button. On the Design Tab, you will find a huge variety of styling options, from color style presets, width, size, shape and icon options.

Step 5. The Animations tab can also be used to animate the entry of the button onto the page. There are 7 animations to choose from.

Step 6. Click Save when you are finished customizing your Button. It will appear in the row of the Container you added it to. Preview the page to view, and you can always come back and edit the Button to fine tune the look and function.

Read below for a detailed description of all element options.

Button Element Options

General Tab

Button URL - Illustrated as A. Add the URL that the Button will link to here, ex: https://example.com.

Button Text - Illustrated as B.  Add the text the Button will display here.

Text Transform - Illustrated as C.  Choose how the text on the Button is displayed, in either Normal (as written) case or Uppercase. Your Default setting is chosen in the Theme Options (Avada > Theme Options > Fusion Builder Elements > Button)

Button Title Attribute - Illustrated as D.  Set a title attribute for the Button Link. This will show on hover.

Button Target - Illustrated as E.  Use this setting to choose how the Button target URL is opened: _self means it opens in the same browser tab, while _blank means it opens in a new browser tab.

Button Additional Attributes - Illustrated as F.  Here you can 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. ex: rel='nofollow'.

Alignment - Illustrated as G.  This setting controls the button's alignment in the container it is in. Choose from  text Flow, Left, Right and Center.

Modal Window Anchor - Illustrated as H.  Add the class name of the modal window you want to open on button click. Note: A Modal Element must be added to the same page as the button.

Element Visibility - Illustrated as I. Allows you to control the Element's visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class - Illustrated as J. Allows you to add a class for the Element.

CSS ID - Illustrated as K. Allows you to add an ID for the Element.

Button Element General Options

Design Tab

Title - Illustrated as A. Add the Title Content here in plain text. Formatting occurs primarily on the Design tab. Although some of the built in Visual Editor functions will work here, like changing the font colour, bold, italic etc., it is best practice to control the general appearance of your Titles through the Theme Options for them (Avada > Theme Options > Typography > Headers Typography), and the Design Options in the Title Element itself.

Margin - Illustrated as B.  Use this setting to override the default values specified in the Title Element Global Options (Avada > Theme Options > Fusion Builder Elements > Title Element). If, in turn, these are set to 0, the margin Top and Bottom values specified in the Headers Typography Section (Avada > Theme Options > Typography > Headers Typography) will be used.

Element Visibility - Illustrated as C. Allows you to control the Element's visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class - Illustrated as D. Allows you to add a class for the Element.

CSS ID - Illustrated as E. Allows you to add an ID for the Element.

Button Element Design Options

Animation Tab

Animation Type - Illustrated as A. Controls the column's animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

Direction of Animation - Illustrated as B. Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation - Illustrated as C. Controls the speed of animation on the column. Choose between 0.1 to 1.

Offset of Animation - Illustrated as D. Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

Button Element General Options

Global Options

As well as the Element Options, there are also global options that can be set for the Button Element in the Theme Options (Avada > Theme Options > Fusion Builder Elements > Button Element).

Button Size - Illustrated as A. Controls the default button size. Choose from Small, Medium, Large, or X-Large.

Button Span - Illustrated as B.  Controls if the button spans the full width of its container. This overrides the width, but not the height, of the above options.

Button Shape - Illustrated as C. Controls the default button shape. Choose from Square, Round, or Pill.

Button Type - Illustrated as D. Controls the default button type. Choose from Flat, or 3D.

Button Typography - Illustrated as E. These settings control the typography for all button text.

Text Transform - Illustrated as F. Controls how the text is displayed on the button. Choose from Normal, or Uppercase.

Button Gradient Top Color - Illustrated as G. Controls the top color of the button background.

Button Gradient Bottom Color - Illustrated as H. Controls the bottom color of the button background.

Button Gradient Top Hover Color - Illustrated as I. Controls the top hover color of the button background.

Button Gradient Bottom Hover Color - Illustrated as J. Controls the bottom hover color of the button background.

Button Accent Color - Illustrated as K. Controls the color of the button border, divider, text, and icon.

Button Accent Hover Color - Illustrated as L. Controls the hover color of the button border, divider, text, and icon.

Button Bevel Color for 3D Mode - Illustrated as M. Controls the bevel color of the buttons when using 3D button type.

Button Border Width - Illustrated as N. Controls the border width for buttons. In pixels.

Button Element Global Options

Button Element Parameters

Copy to Clipboard
  • link - The URL you want the button to link to. For example, http://www.example.com/.
  • text_transform - Select how the text is displayed, Choose from Default, Normal or Uppercase.
  • title - Set a title attribute for the button link. For example, Home.
  • target - Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • link_attributes - This allows you to add additional attributes to the anchor tag. e.g. rel='nofollow'
  • alignment - Choose from left, center, or right. Sets the button's alignment.
  • modal - The unique class name of the Modal Element the button will trigger. Learn more here.
  • hide_on_mobile - Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class - Add a custom class to the wrapping HTML element for further css customization.
  • id - Add a custom id to the wrapping HTML element for further css customization. Learn more here.
  • color - Choose from default, custom, green, darkgreen, orange, blue, red, pink, darkgray, or lightgray. You can also use your custom color schemes. Sets the button's color theme.
  • button_gradient_top_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button background's top gradient color.
  • button_gradient_bottom_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button background's bottom gradient color. Leave blank for solid color.
  • button_gradient_top_color_hover - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button background's top gradient color when hovered.
  • button_gradient_bottom_color_hover - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button background's bottom gradient color when hovered.
  • accent_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button border, divider, text and icon color.
  • acccent_hover_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button border, divider, text and icon hover color.
  • type - Choose from default, flat, or 3d. Sets the button's type.
  • bevel_color - Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the button's bevel color when set to 3D.
  • border_width - Accepts pixel values, for example, 1px. Sets the border width.
  • size - Choose from default, small, medium, large, or xlarge. Sets the button's size.
  • stretch - Choose from default, yes, or no. Enables or disables the button spanning the full width of it's container.
  • shape - Choose from default, square, pill, or round. Sets the button's shape.
  • icon - A font awesome icon value. For example, fa-glass.
  • icon_position - Choose from left, or right. Sets the icon's position on the button.
  • icon_divider - Choose from yes, or no. Show or hide a divider between icon and text.
  • animation_type - Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction - Choose from down, right, left, up, or static. Sets the animation's incoming direction.
  • animation_speed - Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset - Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content - Insert the custom title between the
    Copy to Clipboard

    tags.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept