The WPFolks app is out on iPhone and Android. Free, no ads. Download on the App Store Get it on Google Play
Skip to main content
Login Join
Snippet · CSS

Use a Custom Image as an Elementor Button Background

Shared by Jackson Monichan · June 2, 2026

48 views
3 upvotes
Back to Snippets

This CSS snippet allows you to use a custom image as the background of an Elementor Button widget. Replace the placeholder image URL with your own image URL to create visually engaging buttons. The snippet also includes a smooth background-size transition effect for improved user experience.

selector .elementor-button{
    background-image: url('Image URL');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all 0.4s ease-in-out;
}
Know a different way to do this? Add your approach as a variation so folks can compare them side by side.
Submit a variation

0 comments

Proudly supported by