Creative Button

🔘 Button Widget

The Button Widget in the Topper Pack plugin allows you to add highly customizable, animated buttons with various styles and effects. Whether you’re looking to improve call-to-action engagement or simply enhance the design of your page, this widget offers full control over style, link behavior, and hover interactions.

🚀 How to Enable & Use the Widget

Step 1: Enable from the Dashboard
Go to Topper Pack → Widgets and toggle the switch to enable the Button widget.

Step 2: Add to Elementor Page
Once enabled, open your Elementor editor.
Search for “Button” in the widget panel. Drag and drop the TP Button widget onto your desired section.

🧩 Widget Settings Overview

🔹 Content Tab

• Button Styles:
  Choose from 15 unique button styles (Style One to Style Fifteen) designed for different visual and hover effects.

• Button Text:
  Enter your custom button label (e.g., “Get Started,” “Read More”).
• Link:
  Insert the URL where the button should redirect.
  • Option to open in a new tab
  • Add nofollow for SEO
• Custom Attributes:
  Add attributes like key|value for advanced customization.
• Show Icon:
  Toggle on/off. Add icons from the media library and choose Icon Position (Left/Right of text).

🎨 Style Tab

The Style tab gives you full visual control for both Normal and Hover states.

• Typography:
  Customize font family, weight, size, spacing, etc.
• Color:
  Set button text color.
• Background Type:
  Solid, gradient, or image backgrounds.
• Border Type & Radius:
  Define border style (solid, dashed, etc.) and radius for rounded buttons.
• Shadow & Spacing:
  Customize box shadow, margin, and padding.