WEB ELEMENT

BUTTONS

We have 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.

Unlimited Colors

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

4 Button Sizes

We 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

Our buttons come in 3 different shapes; square, round and pill.
SQUARE SHAPE
PILL SHAPE
ROUND SHAPE

Full Border Control

Shortcode 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

Button Icons

Shortcode allows you to control the border width and border color easily.
ICON WITH DIVIDER
ICON WITHOUT DIVIDER
ICON POSITION LEFT
ICON POSITION RIGHT

Buttons Animations

Shortcode allows you to control the border width and border color easily.
BOUNCE
FADE
FLASH
ZOOM
RUBBERBAND
SHAKE
SLIDE

Total Control Over Meta Deta Display

With each blog shortcode comes a full set of options for meta data. These options allow you to enable or disable each different section of meta data, or the entire set together.

  • Button URL = Add the button’s url ex: http://example.com
  • 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 Size = Select the button’s size. Choose default for theme option selection.
  • Button Span = Choose to have the button span the full width of its container.
  • Button Type = Select the button’s type. Choose default for theme option selection.
  • Button Shape = Select the button’s shape. Choose default for theme option selection.
  • Button Target =_self = open in same window _blank = open in new window
  • Button Title attribute = Set a title attribute for the button link.
  • Button’s Text = Add the text that will display on button
  • Button Gradient Top Color = Custom setting only. Set the top color of the button background.

  • Button Gradient Bottom Color = Custom setting only. Set the bottom color of the button background or leave empty for solid color.
  • Button Gradient Top Color Hover = Custom setting only. Set the top hover color of the button background.
  • Button Gradient Bottom Color Hover = Custom setting only. Set the bottom hover color of the button background or leave empty for solid color.
  • Accent Color = Custom setting only. This option controls the color of the button border, divider, text and icon.
  • Accent Hover Color = Custom setting only. This option controls the hover color of the button border, divider, text and icon.
  • Bevel Color (3D Mode only) = Custom setting. Set the bevel color of 3D buttons.
  • Border Width = Custom setting only. In pixels (px), ex: 1px. Leave blank for theme option selection.
  • Select Custom Icon = Click an icon to select, click again to deselect
  • Icon Position = Choose the position of the icon on the button.
  • Icon Divider = Choose to display a divider between icon and text.
  • Modal Window Anchor = Add the class name of the modal window you want to open on button click.
  • Animation Type = Select the type of animation to use on the shortcode
  • Direction of Animation = Select the incoming direction for the animation
  • Speed of Animation = Type in speed of animation in seconds (0.1 – 1)
  • Offset of Animation = Choose when the animation should start.
  • Alignment = Select the button’s alignment.
  • CSS Class = Add a class to the wrapping HTML element.
  • CSS ID = Add an ID to the wrapping HTML element.