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 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.