Button Element

27/08/2020

The easy to use, and versatile Button Element allows you add a variety buttons to your site, with a huge array of options. Choose from 4 sizes, flat or 3D style, unlimited colors, border widths, border radius, icons, dividers and animations, as well as buttons that open modal popups. Read below for an overview of the specific features of the Element, and watch the video for a visual overview.

Get Started
Learn More
Buy Avada Now
Choose Us!
Buy Now
View Element Demo Page!

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 areas, 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. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

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 5. The next step is to design your Button. On the Design Tab, you will find a huge variety of styling options, from color style presets, width, size, border radius and icon options.

Step 6. The Animations found in the Extras Tab can also be used to animate the entry of the button onto the page. There are 7 animations to choose from.

Step 7. Click Save when you are finished customizing your Button.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab

  • Button URL – Add the URL that the Button will link to here, ex: https://example.com.

  • Button Text – Add the text the Button will display here.

  • Text Transform – 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 – Set a title attribute for the Button Link. This will show on hover.

  • Button Target – Use this setting to choose how the Button target URL is opened. Options are _self, _blank, and Lightbox.  _self means it opens in the same browser tab, while _blank means it opens in a new browser tab. Lightbox will open item in pop up window.

  • Button Additional Attributes – Here you can add additional attributes to the anchor tag. Separate attributes with a white space 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 front-end. ex: rel=’nofollow’.

  • Alignment – This setting controls the button’s alignment in the container it is in. Choose from Text Flow, Left, Right, or Center. This is now part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.

  • Modal Window Anchor – 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 – Allows you to control the Element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • Element Sticky Visibility – (Only visible if parent Container is set to Sticky). 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 – Allows you to add a class for the Element.

  • CSS ID – Allows you to add an ID for the Element.

View The Options Screen

Design Tab

  • Button Style – Select the button’s color. Select default or color name for theme options, or select custom to use advanced color options below.

  • Button Gradient Top Color – Controls the top color of the button background. Leave empty for the default value.

  • Button Gradient Bottom Color – Controls the bottom color of the button background. Leave empty for the default value.

  • Button Gradient Top Hover Color – Controls the top hover color of the button background. Leave empty for the default value.

  • Button Gradient Bottom Hover Color – Controls the bottom hover color of the button background. Leave empty for the default value.

  • Button Text Color – Controls the color of the button border, divider, text, and icon. Leave empty for the default value.

  • Button Accent Hover Color – Controls the hover color of the button border, divider, text, and icon. Leave empty for the default value.

  • Button Type – Controls the button type. Choose from Default, Flat, or 3D.

  • Button Bevel Color For 3D Mode – Controls the bevel color of the button when using 3D button type. Leave empty for the default value.

  • Button Border Size – Controls the border size. In pixels.

  • Button Border Radius – Controls the border radius. In pixels.

  • Button Border Color – Controls the border color of the button. Leave empty for default value.

  • Button Border Hover Color – Controls the hover border color of the button. Leave empty for default value.

  • Button Size – Controls the button size. Choose from Default, Small, Medium, Large, or X-Large.

  • Button Span – Controls if the button spans the full width of its container.

  • Margin – Enter values including any valid CSS unit, ex: 4%. Controls the margin around the Element.

  • Icon – Select an icon to show on the button. Click to select, click again to deselect.

  • Icon Position – Choose the position of the icon on the button. Choose from Left or Right.

  • Icon Divider – Choose to display a divider between icon and text.

View The Options Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

  • Offset of Animation – 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.

View The Options Screen

Global Options

Location: Avada > Options > Avada Builder Elements > Button.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Button Size – Controls the default button size. Choose from Small, Medium, Large, or X-Large.

  • Button Span – Controls if the button spans the full width of its container. This overrides the width, but not the height, of the above options.

  • Button Type – Controls the default button type. Choose from Flat, or 3D.

  • Button Typography – These settings control the typography for all button text.

  • Text Transform – Controls how the text is displayed on the button. Choose from Normal, or Uppercase.

  • Button Gradient Top Color – Controls the top color of the button background.

  • Button Gradient Bottom Color – Controls the bottom color of the button background.

  • Button Gradient Top Hover Color – Controls the top hover color of the button background.

  • Button Gradient Bottom Hover Color – Controls the bottom hover color of the button background.

  • Button Bevel Color for 3D Mode – Controls the bevel color of the buttons when using 3D button type.

  • Button Border Size – Controls the border size for buttons. In pixels.

  • Button Border Radius – Controls the border radius for buttons. In pixels.

  • Button Border Color – Controls the border color for buttons.

  • Button Border Hover Color – Controls the hover border color for buttons.

View The Options Screen