In this tutorial, we will learn how to use and style the popular button widget within Elementor. We’ll walk you through it step by step, so you know how to create stylish buttons for any website project.
This tutorial will cover:
✔ How to insert buttons into your content
✔ Styling your buttons to your exact requirements
✔ Adding links to your buttons to open pages
✔︎ And much more!
Hey there, it’s Ash from Elementor.
In this tutorial, we’re going to explore the button widget to better our understanding of how to style, customise and use this crucial website element.
So get comfy and let’s get started.
Buttons are an important aspect of most websites. They provide a universal standard of encouraging visitors to perform an action and when used correctly can really boost your design and conversions.
In this example, we’re going to create a button within the hero section and configure it to link to a product page.
To get started lets delete the existing button and create a new one from scratch. Simply search for the button widget and drop it into your editor.
The edit button section contains three tabs where you can amend the contents and style of the button. Let’s go through these in order.
To start with, ensure you have the content tab selected. In this area, we are able to set several elements of the button.
First up is ‘Type’. This allows us to define a pre-set style for the button. There is ‘Info, Success, Warning & Danger’. For this tutorial we’ll leave it as default as we’re going to apply some custom styles to create the desired result.
Next, is the ‘Text’ area. Here we can declare the text we would like to appear within the button. In the text field, we’ll type “Buy now” We also have an option to populate this section with dynamic content..
The next option allows us to apply a link to the button. If you know the URL you can simply type it into the field or you can perform a search of your existing pages by typing the first few letters like so (type product…). To display more link options select the gear icon. Here we can specify if you would like the link to open in a new tab.
The alignment area will allow you to specify the position of the button. The options available are left, center, right, and justified. You’ll see justified fills the available space of the container. We’ll set this as left-aligned.
Size allows us to define a preset button size. We have extra small, small, medium, large & extra large. In this example we’ll leave it as small.
Next, we have the icon option. Here we can add an icon to your button which adds a great visual aspect for your visitors. By default no icon is applied, and you choose to upload a custom icon here or choose one from the icon library. We’re going to choose ‘Icon Library’ and search for your desired icon like so (search arrow…). Once you have found an icon select ‘insert’ to add it to your button. The Icon Position allows us to set whether the icon is displayed before or after the text. And Icon Spacing adjusts the space between the text and icon. This design doesn’t require an icon so we’ll switch this option off.
If required, we can also specify a button ID in this section here.
Now, switch to the ‘Style’ tab.
This section will allow us to set the styling options for the button so we can make it fit with the look & feel of the website.
The first option we see is Typography. In this area we can specify exact requirements for the text of our button.
Here, we can set the font via the Global Fonts selection or we can set the font manually.
Let’s select the edit icon.
Set the font family to Montserrat.
The font size to 16px.
Weight we’ll set to 600.
Transform allows us to manage the capitalization of the text. Select the dropdown to view the available options. We’re going to set ours to Uppercase.
Style can be left as Default.
Decoration can also be left as Default.
Next, we can adjust the line-height of our text. Switch to pixels and set this to 19px.
And finally set the letter-spacing to 1.3.
If you need to reset these styles for whatever reason you can do so by using the Back to default option here.
If required, you can also apply a text shadow effect to your text here.
Now let’s apply some new colors to the button.
These colors can be defined using the Global Color selections here, or you can manually set them.
With the NORMAL tab selected change the Text Color to White and the Background Color to Black.
We’ll set the Border Type to solid, the width to 1px on all sides & the border color to Black.
This button will have square edges so set the Border Radius to 0px on all sides. If you wanted to create a rounded button simply increase these values to achieve the desired result.
Box Shadow will apply a shadow effect to the button.
…and finally,
Padding will allow you to fine tune the spacing on all sides of your button. Unlink these values and enter 20px on top, 65px on the right, 20px on the bottom & 65px on the left.
OK, the button is really starting to take shape now.
Let’s apply some additional styles so that when a user hovers over the button it interacts with them.
Switch over to the HOVER tab.
Set the Text Color to Black.
Background Color to Transparent by moving the slider all the way to the left. This will allow the background color or image to show through the button on hover.
And set the Border Color to Black.
Slight pause…
The Hover Animation option allows us to choose an animation for the button. For example we can apply the grow animation and as you can see this adds a subtle effect when the user hovers over the button.
Let’s leave this as none for now.
Finally, we’ll explore the Advanced tab.
Here we are able to set advanced options for your button.
Firstly, we have the Advanced section where we can apply additional margin and padding to the button widget. This section also allows us to set the Z-Index, ID & Class for the button widget.
To find out more about these options, check out our in-depth tutorials on our channel.
Next, is the Motion Effects area. Here we can apply scrolling and mouse effects as well as an entrance animation. In our design we’re going to add a subtle fade-in animation.
Under Entrance Animation select Fade in, set the Animation Duration to Slow and the Animation Delay to 400.
If you would like to learn more about these animations check out our dedicated Motion Effects playlist.
The Background tab allows us to specify a background color for the button widget. Notice how it fills in the entire background of the widget.
Border similar to the background tab allows us to apply a border to the entire button widget, not just the button itself.
The Positioning area allows us to define some advanced position rules. For example, if we wanted to have two buttons side by side we would adjust the Width to Inline.
If we now duplicate our button, you can see they sit side by side to one another
(add 10px margin left to the new button for better spacing)
Let’s delete this duplicated button for now and revert the positioning back to default on the first button.
Responsive will allow you to hide your button on specific screen sizes.
Attributes allow you define custom attributes for your button.
And last but not least if you need to add any custom CSS to your button you can do so in the Custom CSS tab.
You can check out our dedicated tutorials on each of these options.
