October 19, 2023

Align Elementor Button Text with a Simple CSS Addition

Play Video

Aligning Elementor button text can be a bit tricky, especially when you’re dealing with long text that doesn’t fit well on mobile screens. This tutorial will show you how to easily align your Elementor button text using a simple CSS addition.


Please make sure you have the following installed and activated:

Understanding the Problem

When you have a button with long text in Elementor, the text tends to centralize, especially when you switch from desktop to mobile view. This can make your buttons look unprofessional and hard to read.

The Solution: Custom CSS

The solution to this problem is quite straightforward. You’ll need to add a small snippet of custom CSS code to your Elementor button.

Step 1: Navigate to the Elementor Editor

  1. Open your WordPress dashboard.
  2. Go to Pages > All Pages.
  3. Select the page where you want to align the button text.
  4. Click on “Edit with Elementor.”

Step 2: Select the Button Widget

  1. Locate the button widget you want to edit.
  2. Click on it to open the settings panel.

Step 3: Add Custom CSS

  1. Navigate to the Advanced tab.
  2. Scroll down to the Custom CSS section.
  3. Paste the following code snippet:
    .elementor-button-text {
      text-align: left;

Tip: You can replace left with right if you want the text to align to the right side of the button.

Real-Life Example

Imagine you’re running an online store and you have a button that says “Add to Cart and Checkout.” On mobile screens, the text centralizes, making it look awkward. By applying the above CSS code, you can align the text to the left, making it easier to read and more aesthetically pleasing.

Align Elementor Button Text – Conclusion

Aligning Elementor button text is a simple task that can make a big difference in how professional your website looks, especially on mobile devices. With just a small addition of custom CSS, you can easily achieve this.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Align Elementor Button Text with a Simple CSS Addition
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.