Display .png image on the submit button

Hey @frilaser – Thanks for reaching out!

In this specific case, please consider using following CSS, and let me know how it goes:

.wpforms-submit-container::after {
    background-image: url("image URL:");
    content: "";
    width: 100px;
    height: 100px;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
    background-repeat: no-repeat;
    }

In the above code, please be sure to adjust the values as per your requirement.

Kindly,

Thank you!

I got about 95% of the result I’ve been looking for by modifying your code a little to the following:

.wpforms-form
button[type=submit]:before {
background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/08/INFINITY-10px-res-1.png’);
content: “”;
width: 30px;
height: 13px;
top: -5px;
right: 6px;
position: relative;
display: inline-block;
background-repeat: no-repeat;
}

However, the alignment of the “Submit” text is off and I’ve been struggling to position it in the center of the button. text-align:…; is not working.

Anything I’m missing?

Hi @frilaser,

I’m Ralden, jumping in here for?Prashant.

The text-align should work with this, and here’s a screenshot as an example: https://a.supportally.com/i/kZdmhB.

Please note that you should use a CSS snippet like:

.wpforms-form button[type=submit] {
    text-align: center;
}

Or:

.wpforms-form button[type=submit] {
    text-align: center !important;
}

And check other related properties, like padding.

I tried to access https://lhamosplane.world/contact/ to check the issue, but it seems the site is under maintenance.

And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Hope this helps!

Thank you so much! I appreciate the support. All is sorted out now.

Hi @frilaser,

Great to hear that all is sorted out.

With this, I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks!