On most real pages a call to action is an anchor tag with some CSS, not a <button>. Converting those into genuine Button widgets — rather than leaving them as styled text — takes a little detective work.
The fast path: no geometry questions asked
Three shapes convert to a Button widget immediately, with no further tests: a real <button> element; a link whose class list contains btn or button as an exact class name; and a link that computes to display: inline-block — which is how classic button CSS has been written for fifteen years, so most traditionally styled link-buttons take this path without knowing it.
A button role or a cta-style class name also counts in the element’s favour, but only as a signal — elements carrying those still go through the geometry test below.
Detection from CSS alone
The interesting case is a plain <a> that simply looks like a button. Because the conversion happens against a real rendered page, the computed styles can be inspected. An element is treated as a button when all of these hold:
- It is a link, a button element, has a button role, or is a span/div with a pointer cursor.
- It contains no block-level children — a button is single-line content, so anything containing a paragraph, list or nested container is excluded.
- Its text is short (roughly a line’s worth). Long text is prose, not a button label.
- It has a background or a border, a corner radius, and real padding.
- Its display is block, inline-block, flex or inline-flex.
Requiring all of these together is deliberate. Any one signal on its own produces false positives — plenty of non-buttons have a background, and plenty have rounded corners.
What comes across
The label text, the link URL, whether it opens in a new tab, the nofollow flag, text colour, background colour, border and radius, box shadow, the padding (as the button’s own Text Padding control) and the full typography set.
What does not
- Hover states. CSS hover rules cannot be read from a static computed style, so hover colours must be set in Elementor. This is the single most common follow-up task.
- Transitions and animations. Re-apply with Elementor’s own controls.
- Icons inside buttons may need re-picking if the source used an inline SVG rather than an icon class.
When a link should not be a button
Inline text links inside a paragraph stay part of the Text Editor content, with their markup intact. That is correct — turning every link into a Button widget would shred your body copy into fragments.
The actual numbers
The thresholds are worth knowing, because they explain both the successes and the misses. Label text must be 48 characters or fewer. Corner radius must be at least 3px. Padding must be at least 6px horizontally or 4px vertically. And there must be a background or a border.
Forty-eight characters is roughly where a label stops being a label. “Start your free trial today” is 27; a sentence of body copy in a bordered callout box is well past it. Drawing the line there separates calls to action from styled paragraphs, which otherwise share every other property.
The padding floor rejects inline badges and tags. A small coloured pill saying “New” has a background, rounded corners and short text — everything a button has except real padding. Requiring 6px horizontally keeps those as text rather than scattering fake Button widgets through your headings.
The square-corner blind spot
The radius requirement has an honest consequence: a square-cornered button that misses the fast path is not detected. Because inline-block links convert unconditionally, this bites two specific shapes: modern anchors styled with display: inline-flex or flex (the usual way to centre an icon beside a label), and clickable div or span elements. Give either of those deliberately sharp, radius-zero corners — a real choice in brutalist and editorial layouts — and it converts as styled text rather than a Button.
The trade-off is intentional. Dropping the radius condition would sweep in table cells, alert bars, coloured callouts and every other rectangle with a background and short text. A few missed square buttons is a much cheaper error than dozens of false ones.
If your design uses them, the fix is the fast path: make the element a real <button>, or a link with btn or button in its class list — as an exact class name, since btn-primary alone does not match. One attribute fixes every such button on the page.
The cursor route for div and span
Sometimes a call to action is not a link at all — a <div> or <span> wired up with JavaScript. Those qualify only if they carry cursor: pointer, which is the one reliable signal that the author intended it to be clickable.
They will convert to a Button widget with no link, because there is no href to read — the destination lived in a script that was stripped for safety. Fill the link in afterwards. It is still a better starting point than a styled div, since you get the whole Button control set rather than a container you have to restyle.
When the guess is wrong, override it
Heuristics are heuristics, and you do not have to accept the result. In native mode with the advanced strategy, run the mapping analysis and open the per-item mapping panel: every detected element is listed with what it will become and how confident that call was, and each one has a dropdown.
Something that became a Button and should be a heading, or a styled box that should have stayed a container — change it there and convert. This is faster than fixing it in Elementor afterwards, and it survives re-conversion, which manual editing does not.
Tips
- Give calls to action a
buttonorbtnclass in the source; it removes all ambiguity and bypasses the geometry test. - Check the href on extracted blocks — if you copied only an inner section, a wrapping anchor may have been left behind.
- Set hover styles immediately after import, while you still remember which buttons are which.
- If a button did not convert, check its corner radius before anything else — square corners are the usual answer.