Custom button using an image + a different image for hover state

Hi,

Wesbite: https://ellipse-teal-dl5w.squarespace.com/
Pass: 04

I'd like to have a custom button like this:

and a hover state like this:

Button on the home page that needs css:

What css code would I need?
Would I use a image block or a button block? and customise it with css?

Thanks

Thank you works perfectly, looks great!

how would i accomplish this for ALL button on a website? no need for a hover state change. none of the code i found elsewhere has worked. this is the CSS i currently have:

.sqs-block-button-element--large{
  background-image: url('https://static1.squarespace.com/static/6581ea8652cb8456724660cf/t/658ddec876f305615da42421/1703796429005/brushstroke-gold-1800x690px.png'); 
  background-color: transparent!important; 
  background-size: contain!important; 
  background-position: center; 
  background-repeat: no-repeat!important}

i can tell i'm targeting the button because it goes transparent, but my image (uploaded into SquareSpace) won't show at all.

On 12/29/2023 at 4:38 AM, urbnthstl24 said:

how would i accomplish this for ALL button on a website? no need for a hover state change. none of the code i found elsewhere has worked. this is the CSS i currently have:

.sqs-block-button-element--large{
  background-image: url('https://static1.squarespace.com/static/6581ea8652cb8456724660cf/t/658ddec876f305615da42421/1703796429005/brushstroke-gold-1800x690px.png'); 
  background-color: transparent!important; 
  background-size: contain!important; 
  background-position: center; 
  background-repeat: no-repeat!important}

i can tell i'm targeting the button because it goes transparent, but my image (uploaded into SquareSpace) won't show at all.

Use this code

[class*="-button-"] {
  background-image: url('https://static1.squarespace.com/static/6581ea8652cb8456724660cf/t/658ddec876f305615da42421/1703796429005/brushstroke-gold-1800x690px.png') !important; 
  background-color: transparent !important; 
  background-size: contain !important; 
  background-position: center; 
  background-repeat: no-repeat !important;
}