{"id":350,"date":"2025-05-24T10:13:37","date_gmt":"2025-05-24T10:13:37","guid":{"rendered":"https:\/\/doc.topperpack.com\/docs\/general-widgets\/creative-button\/"},"modified":"2025-07-02T06:39:25","modified_gmt":"2025-07-02T06:39:25","slug":"creative-button","status":"publish","type":"docs","link":"https:\/\/doc.topperpack.com\/docs\/general-widgets\/creative-button\/","title":{"rendered":"Creative Button"},"content":{"rendered":"\n

\ud83d\udd18 Button Widget<\/h2>\n\n\n\n

The Button Widget<\/strong> 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.<\/p>\n\n\n\n

\ud83d\ude80 How to Enable & Use the Widget<\/h3>\n\n\n\n

Step 1: Enable from the Dashboard<\/strong>
Go to Topper Pack \u2192 Widgets<\/strong> and toggle the switch to enable the Button<\/strong> widget.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 2: Add to Elementor Page<\/strong>
Once enabled, open your Elementor editor.
Search for \u201cButton\u201d<\/strong> in the widget panel. Drag and drop the TP Button<\/strong> widget onto your desired section.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\ud83e\udde9 Widget Settings Overview<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\ud83d\udd39 Content Tab<\/strong><\/h4>\n\n\n\n
    \n
  • Button Styles:<\/strong>
    Choose from 15 unique button styles (Style One to Style Fifteen) designed for different visual and hover effects.<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
      \n
    • Button Text:<\/strong>
      Enter your custom button label (e.g., \u201cGet Started,\u201d \u201cRead More\u201d).<\/li>\n\n\n\n
    • Link:<\/strong>
      Insert the URL where the button should redirect.\n
        \n
      • Option to open in a new tab<\/li>\n\n\n\n
      • Add nofollow<\/code> for SEO<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Custom Attributes:<\/strong>
        Add attributes like key|value<\/code> for advanced customization.<\/li>\n\n\n\n
      • Show Icon:<\/strong>
        Toggle on\/off. Add icons from the media library and choose Icon Position<\/strong> (Left\/Right of text).<\/li>\n<\/ul>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        \ud83c\udfa8 Style Tab<\/strong><\/h4>\n\n\n\n

        The Style tab gives you full visual control for both Normal<\/strong> and Hover<\/strong> states.<\/p>\n\n\n\n

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

          <\/h3>\n\n\n\n

          <\/p>\n","protected":false},"excerpt":{"rendered":"

          \ud83d\udd18 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. \ud83d\ude80 How to Enable […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":338,"menu_order":4,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[257,258,261,260,256,262,259],"class_list":["post-350","docs","type-docs","status-publish","hentry","doc_tag-button","doc_tag-call-to-action","doc_tag-elementor-button","doc_tag-hover-effect","doc_tag-icon-button","doc_tag-tp-button","doc_tag-widget"],"author_avatar":"https:\/\/doc.topperpack.com\/wp-content\/litespeed\/avatar\/7b6b48be1e52939d6a914fe9b20bbc7a.jpg?ver=1777451331","author_name":"tpl","_links":{"self":[{"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/comments?post=350"}],"version-history":[{"count":1,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs\/350\/revisions"}],"predecessor-version":[{"id":1224,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs\/350\/revisions\/1224"}],"up":[{"embeddable":true,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/docs\/338"}],"wp:attachment":[{"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/media?parent=350"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/doc.topperpack.com\/wp-json\/wp\/v2\/doc_tag?post=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}