Advanced Button Widget

The Advanced Button Widget from RTM Elements allows you to create stylish, eye-catching buttons for your Elementor website. It goes beyond a regular button, giving you more control over its look, icons, and hover effects.

With the Advanced Button Widget, you can design buttons that match your brand and encourage visitors to take action.

Step 1 — Make Sure RTMKit & RTMElements Activated

The Advanced Button Widget is part of the RTMElements Addon, which is available with a Rometheme PRO subscription. Before you begin, make sure you have:

1. Installed and activated RTMKit on your WordPress website. (Go to Plugins → Add New Plugin, search for RTMKit, then click Install Now and Activate).
2. Subscribed to Rometheme PRO and connected your account to RTMKit.
   📘 Getting Started with Rometheme PRO
3. Activated the RTMElements Addon from WordPress Dashboard → RTMKit → Features → Addons → Install & Activate RTM Elements.
   📘 How to Activate Addons

Step 2 — Add the Advanced Button Widget

• Open the page with Elementor.
• Find RTM Elements → Advanced Button.
• Or search for Advanced Button in the Elementor widget panel.
• Drag and drop the widget into your desired section or container.

Step 3 — Setting the Advanced Button Widget

In the Content tab, you will find three sections to set up your button.

Button

• Button: Choose a button style, such as Text + Arrow Box, Aura Pill, Circle Expand, Cursor Magnet, Jet Hover, Premium Glow, Shimmer Line, Staggered Letters, or Text Scroll.
• You can see what each style looks like in the image below.
• Then set the button text, link, icon, icon position, and alignment.
• You can also add a different icon that appears on hover.

Hover Animation

• Hover Animation: Adds movement when visitors hover over the button. Turn on Text Roll to make the text slide up and roll in again, choose how the icon moves, and enable Magnetic Effect to make the button follow the cursor. You can also set the animation duration.

Step 4 — Custom Style the Advanced Button Widget

• Go to the Style tab to customize the button’s appearance to match your website’s design.
• Button: Set the button’s typography, width, padding, text color, background, border, and corner radius, with separate Normal and Hover styles.

• Icon: Adjust the icon size, the box around it, its spacing from the text, and its colors, border, and background, also with Normal and Hover styles.

Step 5 — Publish the Template

• Once your design is complete, click Publish to save your changes and make your Advanced Button live on your website.