Looking to change the form block Lightbox button with a custom button image.\

Site URL: https://jdmlabs.io

Hello community,

What would be the best approach to change the Form Block button when Lightbox is enabled. I have a custom graphic image that I need to replace it with?

Just looking to swap out the initial button that appears when Lightbox is enabled. 

Thanks!

13 hours ago, DustyBottoms said:

Site URL: https://jdmlabs.io

Hello community,

 

What would be the best approach to change the Form Block button when Lightbox is enabled. I have a custom graphic image that I need to replace it with?

 

Just looking to swap out the initial button that appears when Lightbox is enabled. 

Thanks!

You mean that you want to set the background image for button 'Submit' to replace the default background color, don't you?

@bangank36

I am actually looking to change the button prior to the form opening up.

I am attaching the button below, I am trying to exchange it for a custom image that is a .png. 

@bangank36

I was able to accomplish this task using the script below, but how am I able to disable the hover, so the button stays the same, or display a drop shadow effect when hovered. 

button.lightbox-handle.sqs-system-button.sqs-editable-button {
  background: transparent !important;
  background-image: url('https://static1.squarespace.com/static/613834447ae8697975d8c315/t/616ef7ec9e4a0d5122300cdb/1634662380095/button_bottom-.png') !important;
  background-position: center !important;
  background-size: auto 150px !important;
  background-repeat: no-repeat !important;
   padding: 45px 220px !important;
}

Any help would be appreciated 

On 10/21/2021 at 10:27 AM, DustyBottoms said:

Any help would be appreciated 

You mean Get started buttons? Don't remove any code in your current code. Add this CSS

button.lightbox-handle.sqs-system-button.sqs-editable-button:before {
    display: none !important;
}

button.lightbox-handle.sqs-system-button.sqs-editable-button {
    color: white !important;
    opacity: 1 !important;
}