# Buttons

- Link: https://www.solmesz.com/buttons
- Published: 2014-06-18T16:37:45-03:00
- Author: Sol Mesz

# Button Shortcode

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.

[Combine Anything](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Modal Click Here](https://www.solmesz.com/buttons#)

[Combine Anything](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

**Unlimited Colors**

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

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Color](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

**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 Button](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Medium Button](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Large Button](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[XLarge Button](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

**2 Button Types**

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

[Super Sleek Flat Button](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Eye-Popping 3D Button](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

**3 Button Shapes**

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

[Square Shape](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Pill Shape](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Round Shape](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

**Full Border Control**

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

[0PX Border](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[1PX Border](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[2px Border](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[3px Border](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[4px Border](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[5px Border](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[6px Border](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[7px Border](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

**Button Icons**

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

[Icon Position Left](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Icon With Divider](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Icon Without Divider](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Icon Position Right](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

**Button Animations**

Animate the buttons with smotth CSS3 animations. 5 animations types, 4 directions,
speed control

[Bounce](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Shake](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Fade](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Slide](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

[Flash](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)

**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_. Choose _custom_ for advanced options.
   Select _default_ for Theme Option values. Sets the button’s color.
 * **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.
 * **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_colors** – _Custom_ setting only. Accepts a hexcode _( #000000 )_ 
   or RGBA values _( rgba(0,0,0,0) )_. Sets the top and bottom colors of the background
   gradient.
 * **gradient_hover_colors** – _Custom_ setting only. Accepts a hexcode _( #000000)_
   or RGBA values _( rgba(0,0,0,0) )_. Sets the top and bottom hover colors of the
   background gradient.
 * **accent_color** – _Custom_ setting only. Accepts a hexcode _( #000000 )_ or 
   RGBA values _( rgba(0,0,0,0) )_. Sets the color of the _button border, divider,
   text _and_ icon_.
 * **acccent_hover_color** – _Custom_ setting only. Accepts a hexcode _( #000000)_
   or RGBA values _( rgba(0,0,0,0) )_. Sets the hover color of the _button border,
   divider, text _and_ icon_.
 * **bevel_color** – _Custom_ setting only. Accepts a hexcode _( #000000 )._ Sets
   the bevel color of 3D buttons.

 * **border_width** – _Custom_ setting only. Accepts pixel values, for example, 
   _1px_.
 * **shadow** – Can be one of these values: _default, __yes, _or_ no._ This will
   enable or disable shadows. Choose _default_ for Theme Option selection.
 * **icon** – A [font awesome](http://fortawesome.github.io/Font-Awesome/icons/)
   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,
   shake, _or_ slide. _Sets the animation to use on the shortcode.
 * **animation_direction** – Can be one of these values: _down, right, left, _or_
   up. _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.
 * **alignment** – Can be one of these values: _left, center, _or_ right_. Sets 
   the button’s alignment.
 * **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.

# Join The 100,000+ Satisfied Avada Users!

[ BUY AVADA NOW!](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)