The Buttoner widget has straightforward style settings that allow you to manage the display of each of the elements according to your needs. Change the color, typography, text shadow, background color, border, margins, and paddings for weather characteristics. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Buttoner widget. You will find the widget at the end of the general section.

Drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

• Content
• Style
• Advanced

Content tab

On the Content tab of the Buttoner widget, you can manage button link and text, specify the icon and other things.

Buttoner settings

Button Text

A text field to enter the name of the button.

Link

A field to enter the button URL and additional link settings.

Width

Specify the button width in the required units(percent or pixels) for different devices using the slider.

Alignment

Manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.

Show Icon

The toggle to enable/disable the display of the button icon.

Button icon

Select the button icon from the Icon library or upload your own in SVG format. The option is available when the Show icon toggle is enabled.

Icon position

Select the icon position relative to the button text. The available positions: Before, After, Top, Bottom. The option is available when the Show icon toggle is enabled.

Icon spacing

Specify the icon spacing in the required units(percent or pixels) for different devices using the slider. The option is available when the Show icon toggle is enabled.

Button ID

Add the unique ID for the created button. Please make sure the specified ID is not used elsewhere on the current page.

Cursor type

The option allows you to select one of the available cursor types from more than 25 available. Besides, you can upload your own cursor by selecting the appropriate PNG image.

Style tab

On the Buttoner widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.

Normal/Hover/Active settings

• Text Color– specify the font color and opacity for the text of the current block using the color picker.
• Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.

• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Width – specify the button width for all devices or for desktop, tablet or mobile separately. The border width of each button side can be set independently.
• Color – specify the color and opacity for the button border using the color picker.
• Border Radius – the setting allows managing the border radius of the button in different units(px, em, %) for desktop, tablets, or phones.
• Padding – the setting allows managing the padding of the button in different units(px, em, %) for desktop, tablets, or phones.

Multi-shadow – the option allows you to add multiple shadows with separate settings for one object. Each shadow can have its own color, horizontal and vertical shift, blur, and spread. This feature can be useful for creating neomorphic buttons.

• Rotate – specify the rotation angle of the element for all devices or for desktop, tablet or mobile separately.
• X Offset – specify the offset of the text along the x-axis
• Y Offset – specify the offset of the text along the y-axis
• Transition Duration – specify the duration of the transition between different button states. For example, changing from a normal state to a hover, which affects the speed of hover animation
• Hover Animation – apply one of the available hover animations for the button.

Advanced Tab

The settings in the advanced tab Synopter widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.