Widgets

Button

Step-by-Step Tutorial on Using the Button Widget of Zyre Addon

The Button Widget in Zyre Addon empowers you to design modern, professional buttons for your Elementor site. With customizable effects and styles, you can instantly upgrade the look and feel of your webpage.

Learn How To Use Button Widget:

Exploring the Features of Button Widget

Step 1:

From the left panel, search or choose the Button widget of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Button Content:

  • Button Style : you can choose a predefined style from here
  • Button Alignment :Set the button alignment.
  • Text : Define the button text.
  • Link : Add a custom link to the button
  • Icon : Set an icon (including SVG)
    • Icon Position : Adjust the icon’s position (before/after text)
    • Icon Spacing : Control the space between icon and text
  • Button ID : Assign a unique ID to the button.
  • Custom Class : Add custom CSS class.
  • Onclick Event : Set a JavaScript action on button click.

Step 3: Style tab

In the Style section, you can customize the Button and Icon (make sure you’ve added the icon first)

Button Style:

  • Width & Height : Set custom button dimensions.
  • Justify-content : Justify contents of the button with icon.
  • Typography : Customize font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Text Shadow : Apply a shadow effect to the button text.
  • Text Color : Set text color for both normal and hover states.
  • Background Type : Choose classic or gradient background for normal and hover states. Explore full background settings here.
  • Box Shadow : Apply a drop shadow effect to the button container.
  • Border Type : Set border style with width and color.
  • Border Radius : Apply rounded corners to the button.
  • Padding : Adjust inner spacing of the button.
  • Margin : Control outer spacing of the button.

Icon Style:

  • Icon Size : Adjust the size of the icon.
  • Background Width & Height : Set width and height of the icon background area.
  • Icon Color : Choose icon color for normal and hover states.
  • Background Color : Choose classic or gradient background for normal and hover states. Explore full background settings here.
  • Border Type : Set border style with width and color.
  • Border Radius :Aapply rounded corners to the icon.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Button come to life on your webpage!

That’s a wrap — you’re ready!

Share: