Button

The Button Widget in JupiterX is a versatile tool that allows you to create and customize buttons directly within your web page design. Buttons are commonly used as CTAs to encourage specific actions from users, such as signing up, downloading, or exploring further.

View Live Demo

Content Tab

Within the Content Tab, you'll find essential attributes to define your button's purpose and appearance:

  • Alignment: Position your button to the left, center, or right within its section.
  • Text: Input the main text for your button, like "Learn More" or "Buy Now".
  • Subtext: You can add additional details under the main text.
  • Choose Icon: Pick an accompanying icon from our library or upload your own.
  • Show as Add to Cart Button: Switch it on to link the button with a WooCommerce product for quick shopping experiences.
  • Turn to Popup Action Button: Enable this when editing popups. You can set it to perform actions like closing the popup after a click.
  • Link: Set the target URL for the button. Optionally use dynamic tags for complex interactions.

Style Tab

Container

  • Alignment: Align the button within its container (left, center, right, justified).
  • Width: Set the width of the button, choosing from pixel or percentage.
  • Height: Define the button's height in pixels.
  • Padding: Adjust the padding around the button's content.

Typography

  • Text Color: Select a color for the button text.
  • Subtext Color: Choose a color for any subtext on the button.
  • Background Type: Choose between a classic color background or a gradient for the button's background.

Border

  • Border Type: Pick a border type (solid, dashed, dotted, etc.) for the button.
  • Border Radius: Set the radius for the button's corners to control how rounded they are.
  • Box Shadow: Add a shadow to the button to make it stand out.

Normal Effects

  • None: No additional effects are applied to the button in its normal state.
  • Shine: Adds a shine effect.
  • Shockwave: Creates a shockwave-like effect.
  • Jump: Makes the button appear to jump.
  • Blink: Causes the button to blink.

Animated Gradient

  • Animated Gradient: Toggle on to enable an animated gradient background.
  • Color: Add colors to create the gradient effect. You can add multiple colors.
  • Direction: Choose the direction of the gradient animation (Left, Right, Up, Down).
  • Animation Duration: Adjust the speed of the animation by changing the duration.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.