Sliding Bar Section For Widgets

This is the sliding section that can be enabled or disabled on any demo. You can insert anywhere from 1-6 columns along with any widget that comes with Avada, WordPress or additional 3rd party plugins. It's perfect for placing additional information on your site.

Contact Info

12345 North Street, New York City, NY 555555

Phone: 1-800-555-5555

Mobile: 1-234-567-8910

Fax: 1-234-879-5641

Web: http://yourwebsite.com

Loading...
Buttons 2016-12-07T23:44:51+00:00

Button Element

Avada includes some pretty amazing button options. Buttons are an integral part of your site, and we’ve made sure you have the options you need to add beautiful buttons to any page. 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.

Get Started
Buy Now
Buy Avada Now
Learn More
Get it now!

Unlimited Colors

Control all colors; backgrounds, gradient backgrounds, hover backgrounds, hover accents, accents (border, text, icon, divider) & 3D bevel.

Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color
Color

4 Button Sizes

Avada buttons come in 4 different sizes so you always have the perfect size button for each situation. Choose small, medium, large or xlarge.

Small
Medium
Large
XLarge

2 Button Types

Choose a super sleek Flat style button, or an eye popping 3D button.

Super Sleek Flat Button
Eye-Popping 3D Button

3 Button Shapes

Avada buttons come in 3 different shapes; square, round and pill.

Square Shape
Pill Shape
Round Shape

Full Border Control

Avada allows you to control the border width and border color easily.

0px Border
1px Border
2px Border
3px Border
4px Border
5px Border
6px Border
7px Border
8px Border
9px Border
10px Border
11px Border

Button Icons

Avada integrates the full font awesome icon with buttons. Choose icon location, color and use with or without a divider.

Icon with divider
Icon Position Left
Icon without divider
Icon Position Right

Animation Settings

Animate the buttons with smooth CSS3 animations that include 7 animations types, 4 directions, animation speed control and animation offset to control when the element starts the animation.

Bounce
Fade
Flash
Rubberband
Shake
Slide
Zoom

Button Span Option

The popular button element has a new option to span the entire width of the surrounding container.

Buttons Span Container Width

Sed ut neque semper, egestas erat sed, maximus nisi. Aenean sit amet pretium nibh. Nam leo velit, accumsan.

Incredible Span Button

Buttons Span Container Width

Sed ut neque semper, egestas erat sed, maximus nisi. Aenean sit amet pretium nibh. Nam leo velit, accumsan.

Buy Avada Now
100% Width Button!

Complete Set of Options

Every option and description included with the button shortcode is listed below.

  • link – The link you want the button to direct to, including http://. For example, http://www.example.com/.
  • color – Can be one of these values: default, custom, green, darkgreen, orange, blue, red, pink, darkgray, or lightgray. Sets the button’s color. Only the Custom type can use the custom settings.
  • size – Can be one of these values: default, small, medium, large, or xlarge. This sets the button’s size. Choose Default for Theme Option selection. Sets the button’s size.
  • stretch – Can be one of these values: default, yes, or no. Enables or disables the button to span the full width of its container. Choose Default for Theme Option selection. Sets the button’s size.
  • type – Can be one of these values: default, flat, or 3d. Sets the button’s type. Choose default for Theme Option selection.
  • shape – Can be one of these values: default, square, pill, or round. Sets the button’s shape. Choose default for Theme Option selection.
  • target – Can be one of these values: _blank for new window, or _self for same window.
  • title – Set a title attribute for the link the button directs to. For example, Home.
  • gradient_colorsCustom setting only. Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the top and bottom colors of the background gradient.
  • gradient_hover_colorsCustom setting only. Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the top and bottom hover colors of the background gradient.
  • accent_colorCustom setting only. Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the color of the button border, divider, text and icon.
  • acccent_hover_colorCustom setting only. Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the hover color of the button border, divider, text and icon.
  • bevel_colorCustom setting only. Accepts a hexcode ( #000000 ). Sets the bevel color of 3D buttons.

  • border_widthCustom setting only. Accepts pixel values, for example, 1px.
  • icon – A font awesome icon value. For example, fa-glass.
  • icon_divider – Can be one of these values: yes, or no. This will show or hide a divider between icon and text.
  • icon_position – Can be one of these values: left, or right. Sets the position of the icon on the button.
  • modal – The unique name of the Modal Shortcode you already created that allows the button to trigger the modal.
  • animation_type – Can be one of these values: none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the shortcode.
  • animation_direction – Can be one of these values: down, right, left, up, or static. Sets the incoming direction for the animation.
  • animation_speed – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • animation_offset – Can be one of these values: default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • alignment – Can be one of these values: left, center, or right. Sets the button’s alignment.
  • element visibility – Choose to show or hide the element on small, medium or large screens. Show them on all, or just some, givine you full control over all screen sizes. Each screen size also has a custom width setting in Fusion Theme Options.

  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 300,000+ Satisfied Avada Users!

BUY AVADA NOW!
Layout Boxed Mode Backgrounds
Created With Avada Avada's powerful setup allows you to easily create unique looking sites. Here are a few included examples that can be installed with one click.