5 minutes read

Button Block

Button Block options:

  • Button text – type in the text displayed on your button.
  • Link (URL) – insert your button’s link URL here.
  • Open in new window – choose whether your link is going to be opened in a new window.
  • Expose – optional additional button exposure, for example for marketing.
  • Wide – you can set your button to full content width.
  • Deeplink – choose whether your button’s link is going to appear as a deeplink.
  • Rel – you can set button “rel” attribute here.
  • OnClick (click callback) – execute a JavaScript function when the button is clicked.
  • Icon set (left – before text) – choose the icon set from Multi, Font Awesome solid, Font Awesome regular, and Font Awesome brands.
  • Icon (left – before text) – add an icon to your button’s left side.
  • Icon set (right – after text) – choose the icon set from Multi, Font Awesome solid, Font Awesome regular, and Font Awesome brands.
  • Icon (right – after text) – add an icon to your button’s right side.
  • Mouse over icon animation – you can add a mouse hover animation to your button’s right icon. Choose from move, fade right, or none.
  • Tooltip text – set any text for your button’s tooltip.
  • Tooltip position – set tooltip position from top, bottom, left and right.
  • Tooltip type – set the tooltip style type. Choose from dark, gray or light style.
  • Tooltip max width (in px) – set tooltip max width in pixels.
  • Top margin – set the top margin. Use any CSS-compatible margin value.
  • Right margin – set the right margin. Use any CSS-compatible margin value.
  • Bottom margin – set the bottom margin. Use any CSS-compatible margin value.
  • Left margin – set the left margin. Use any  CSS-compatible margin value.
  • Top padding – set the top padding. Use any CSS-compatible padding value.
  • Right padding – set the right padding. Use any CSS-compatible padding value.
  • Bottom padding – set the bottom padding. Use any CSS-compatible padding value.
  • Left padding – set the left padding. Use any CSS-compatible padding value.
  • Top margin (mobile) – set the top margin on mobile devices. Use any CSS-compatible margin value.
  • Bottom margin (mobile) – set the bottom margin on mobile devices. Use any CSS-compatible margin value.
  • Position – set your button’s position to left, center or right.
  • Position on mobile – set your button’s position on mobile devices to left, center or right.
  • Type – set your button’s style type. Choose from Flat, Vista, Gradient.
  • Size – set the button size. Choose from small, normal, large, x-large and xx-large.
  • Border radius – set the button shape using border radius value in pixels. For a round shape, enter a value larger than half of the button’s height.
  • Text transform – set the text transformation to uppercase, lowercase, capitilize, none, or use the default Customizer setting.
  • Mouse over animation – you can add an animation on mouse hover. Use the default animation set in the Customizer or select one of the available animations. This option doesn’t apply to Vista button type.
  • Background color – set your button’s color.
  • Background gradient color – set your button’s second color (option available with Gradient style type).
  • Background color (mouse over) – set your button’s color on mouse hover.
  • Background gradient color (mouse over) – set your button’s second color on mouse hover (option available with Gradient style type).
  • Gradient direction – set the direction of the gradient colors (option available with Gradient style type).
  • Gradient direction (mouse over) – set the direction of the gradient colors on mouse hover (option available with Gradient style type).
  • Text color – set your button’s text color.
  • Text color (mouse over) – set your button’s text color on mouse hover.
  • Icon color – set your button’s icon color.
  • Icon color (mouse over) – set your button’s icon color on mouse hover.
  • Border top width – set the width of the button’s top border.
  • Border right width – set the width of the button’s right border.
  • Border bottom width – set the width of the button’s bottom border.
  • Border left width – set the width of the button’s left border.
  • Border color – set the color of the button’s border.
  • Border color (mouse over) – set the color of the button’s border on mouse hover.
  • Lift on hover – you can set the button to lift on mouse hover. Enter the amount in pixels.
  • Shadow – you can add a shadow to your button, choosing its style from the Customizer or adding a custom shadow with options below.
  • Shadow color – set the color of the shadow.
  • Shadow blur – set the blur of the shadow.
  • Horizontal offset – set the horizontal offset of the shadow.
  • Vertical offset – set the vertical offset of the shadow.
  • Shadow type – set the shadow type to outer or inner.
  • Shadow (on mouse hover) – you can add a hover shadow to your button, choosing its style from the Customizer, or adding a custom hover shadow with options below.
  • Shadow hover color – set the hover color of the shadow.
  • Shadow hover blur – set the hover blur of the shadow.
  • Hover horizontal offset – set the hover horizontal offset of the shadow.
  • Hover vertical offset – set the hover vertical offset of the shadow.
  • Animation – animate your button.
  • Animation delay (in milliseconds) – set animation’s delay. Use miliseconds.
  • Animate anytime this block enters the viewport – you can choose to animate the block anytime it enters the viewport, instead of only once.
  • Track clicks on this button – you can choose to track this button clicks.
  • Text before click – add the text that will appear on the button before clicking.
  • Additional text before click – you can add an additional text hint that will appear on the button before clicking.
  • Text after click – add the text that will appear on the button after clicking.
  • Tracking class – you can add an optional CSS class to track many buttons with the same class at the same time.
  • Class – add a custom CSS class to your button.
  • ID – add a custom CSS ID to your button.
  • Style –  add an inline CSS style to your button.
  • Custom attributes – you can add custom attributes to your button. Use key:value pairs, one pair per line.