How to Insert Image Buttons on Elementor

intermediate 7 min read Updated 2026-03-24

Quick Answer

Elementor lacks a native Image Button widget; use the Button widget, set a background image in the Style tab, and add custom CSS class for hover effects. Align to center, use Cover size for responsiveness, and add white text overlay. Preview and add CSS via Customizer for advanced styling.

Get Elementor Deal → Partner

Try Elementor Full Elementor Review

Prerequisites

Active Elementor (free or Pro) plugin installed
WordPress admin editing access
Browser with developer console (Chrome recommended)
Site backup recommended
Basic CSS knowledge helpful

Step-by-Step Instructions

Edit Page with Elementor

Navigate to your WordPress page or post and click Edit with Elementor to open the editor dashboard. This launches the full Elementor canvas for widget placement.

Add Section and Button Widget

Click the + icon on the canvas to add a new Section with 1 column (default). Search for and drag the Button widget from the left panel into the column.

Use the widget handle (top icon) for dragging if issues occur.

Configure Button Content

In the Content tab, enter button text like 'Click Here' in the Text field. Click the link icon to add a URL or select Dynamic. Set Alignment to Center. Optionally add an icon and set Icon Position to Before or After.

Set Background Image

Switch to the Style tab. Under Background, choose Type: Classic. Click Background Image to upload or select an image (recommended 300x100px PNG/JPG). Set Position: Center Center, Attachment: Scroll, Repeat: No-repeat, and Size: Cover for responsive fit.

Cover ensures the image fills the button responsively.

Style Typography and Spacing

Still in Style tab, under Typography set Size: 16px and Color: #FFFFFF for visibility on images. Add Padding: 20px 40px and Border Radius: 5px. Duplicate settings under Hover for effects like opacity changes.

White text creates clean overlay on dark images.

Add Custom CSS Class

Go to Advanced tab > CSS Classes and enter image-button. This enables targeted custom CSS.

Add Custom CSS for Effects

Preview the page, then open Customizer > Additional CSS. Paste:

.image-button { position: relative; overflow: hidden; } .image-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s; } .image-button:hover::before { opacity: 1; }

Adjust for hover overlay.

Test hover in preview before publishing.

Update and Test Responsiveness

Click Update to save. Preview on desktop, tablet, and mobile to ensure the image button scales correctly with Cover sizing.

Optional Icon or Advanced Tweaks

Return to Content tab to add SVG icons via the SVG button if needed. Use browser console (Ctrl+Shift+J) for any JS errors during testing.

Enable SVG support in Elementor settings for custom icons.

Common Issues & Troubleshooting

Images show role='button' unexpectedly and become clickable without links

Change image size from Full to Custom or Large in widget settings; deactivate plugins one-by-one and switch to Hello Elementor theme to isolate conflicts; clear all caches.

Widgets won't drag-and-drop into place

Drag by widget handle not content; enable Elementor Safe Mode (Tools > Safe Mode); check browser console for JS errors like Uncaught TypeError and disable conflicting plugins.

Background image doesn't cover button responsively

Ensure Background Size is Cover and Position is Center Center; test on multiple devices and adjust image dimensions to 300x100px.

Hover effects not working

Verify CSS class image-button is applied; add !important to CSS rules if theme overrides; clear caches and regenerate Elementor CSS (Tools > Regenerate).

Button padding applies to container not button

Use custom CSS like .image-button a { padding: 20px 40px !important; } to target the link directly.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Elementor website before purchasing.

Visit Elementor View Elementor Pricing