One of the most commonly used elements in Elementor is the Button widget. Buttons can be used for various purposes, such as call to action, navigation, and social media sharing.
By default, the text in Elementor Button widgets is aligned to the center. However, you can use custom CSS to align the text button to the left, right, or justified. This can be useful for creating buttons to match or align with your website design.
This article will show you how to text alignment in the Elementor Button widget.
How to Text Alignment in the Elementor Button Widget
1. Add the Elementor Button Widget
First, go to your Elementor editor; add one or some Button widgets, or you can select your existing widgets. Afterward, tweak and style up your widgets as you like.
2. Add the Custom CSS
Once you add the Elementor Button widgets, we will need to add a simple CSS snippet to align the text button. You can place the CSS snippet in the Section, Column, or Widget settings. It depends on how many text buttons you want to align. We will put the CSS snippet into the Column settings in this example.
On the Column settings panel, navigate to the Advanced tab -> Custom CSS. Next, copy the simple CSS snippet below and paste it into the Custom CSS input field.
selector .elementor-button-text {
text-align: left;
}
Here is a breakdown of the code:
selector: This keyword tells the browser that the following code is a CSS selector..elementor-button-text: This CSS selector selects all the text elements on the Button widget.{ text-align: left; }: This is a CSS declaration. It sets the text-align property of the selected elements to the left.
Note: If you want to learn more about the CSS selector list, you can click here. Because we’ve been making a special article about it.
Note: The CSS snippet above will align the text button to the left. If you want to align your text button to the right or justified, replace the property value “text-align: left” to “text-align: right" or “text-align: justify“.
That’s it. As you can see from the image above, the text buttons are aligned perfectly. Don’t forget to save or publish your project if you want to.
The Bottom Line
Custom CSS can align the text in Elementor Button widgets to the left, right, or justified. This can be useful for creating buttons to match or align with your website design. To achieve this, the article provides a simple CSS snippet to copy and paste into the Section, Column, or Widget settings.
