To create a button in Elementor, drag the Button widget into a container, type the label and add a link in the Content tab, then style it in the Style tab: typography, text and background colours, border radius, padding and a hover colour. For consistent buttons across the site, set the button style once in Site Settings, Buttons (or with a Class in the Atomic Editor) instead of styling every button by hand.
- Use action labels such as “Get a free quote”, not “Click here” or “Submit”.
- Set global button styles in Site Settings so every button matches.
- Always style the hover state and keep text contrast readable.
- Make buttons at least 44 px tall so they are easy to tap on phones.
- Use one primary style and one secondary style, not five.
How do you add a button in Elementor?
- Open the elements panel and search for “Button”.
- Drag it into a container.
- In the Content tab, write the label and paste the link. Tick “open in new window” only for external sites.
- Optionally add an icon (an arrow works well) and choose its position.
- Set alignment, and Full Width on mobile if it helps tapping.
For phone, email or WhatsApp buttons, use links such as tel:+8801XXXXXXXXX, mailto:you@example.com or https://wa.me/8801XXXXXXXXX. See how to add a WhatsApp button.
How do you style a button?
| Setting | Where | Good starting value |
|---|---|---|
| Typography | Style, Typography | Global accent font, 16 px, weight 600 |
| Text colour | Style, Normal | White on a dark or brand background |
| Background | Style, Normal | Global accent colour |
| Hover | Style, Hover | Slightly darker background, same text colour |
| Border radius | Style | 6 to 10 px, or fully rounded for a soft look |
| Padding | Style | 14 px top and bottom, 28 px left and right |
| Transition | Style, Hover | 0.2 to 0.3 seconds |
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
How do you make every button match?
In Site Settings, open Buttons and set typography, colours, border, radius and padding for normal and hover states. Every Button widget that has not been custom-styled will follow these settings. For a secondary (outline) style, style one button, then copy and paste style to others. In the Atomic Editor, create Classes such as “btn-primary” and “btn-outline” and assign them; change the class and every button updates. See global colours and typography.
What makes a button get more clicks?
- Clear benefit in the label: “Get my free audit” beats “Submit”.
- Contrast: the main button should be the most noticeable colour in the section.
- One primary action per section: pair it with, at most, a quieter secondary button.
- Placement: near the information that convinces, such as price or reviews.
- Reassurance under it: “No card needed” or “Reply within 24 hours”.
How do you add hover animations without slowing the page?
Use the Hover Animation option (grow, shrink, float) or a simple background colour transition. These are pure CSS and cost almost nothing. Avoid heavy entrance animations on every button and respect users who prefer reduced motion. More in Elementor motion effects.
How do you make buttons accessible?
- Use real links or buttons, never plain text styled to look clickable.
- Keep a visible focus outline for keyboard users.
- Avoid icon-only buttons without a label; if needed, add an accessible name.
- Make tap targets at least 44 by 44 px.
Want to learn Elementor faster, live and 1-to-1?
I teach WordPress and Elementor 1-to-1 over Zoom or Google Meet, on your own website, at your pace. Lessons start at $40, every lesson is recorded so you can rewatch it, and you get a short checklist afterwards. Beginners, business owners, students and freelancers are all welcome. See lessons and prices or book a free intro call.
Frequently asked questions
How do I change the button color in Elementor?
Select the button, open the Style tab and set the background colour for Normal and Hover, ideally using a global colour.
How do I make all Elementor buttons the same?
Set the button style in Site Settings, Buttons, or use a Class in the Atomic Editor, and avoid custom styles on individual buttons.
How do I make a button open WhatsApp?
Use a link such as https://wa.me/ followed by your number in international format without the plus sign.
What is a good button size for mobile?
At least 44 px tall with enough padding, and full width on mobile if the layout allows.
Why does my Elementor button not change on hover?
Hover settings are in a separate Hover tab under Style. Set the hover colours there and add a short transition.
Sources
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
More WordPress guides
Guide, 4 min readHow to Create a Blog Page With Elementor (Loop Grid and Archive)
Guide, 4 min readHow to Use Elementor Global Colors and Typography (2026)
Guide, 3 min readHow to Create a Landing Page in Elementor (Step by Step)
Guide, 4 min readElementor Sections, Columns and Containers Explained (2026)Rather have an expert run your WordPress site?
Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.
