Using Background Images to Replace Stock Buttons

Site URL: http://lakerenfaire.com/

Ciao Everyone!

I have been able to make the change to the buttons site-wide to use the styling of a "background-image" to replace the buttons on the website. However, I am still have some trouble getting the buttons to format to the correct size. When using the "background-size" as "cover" the image does not display larger enough center the button text inside the button. Setting the the size to contain creates a very small image. Additionally I have have tried setting the size to auto and set parameters, but was still having to set a width which did strange things to the placement on the page. 

Here is the code that is currently on the site adjusting the paddings, but is still not correct to prevent the button elements shifting from their original position on the page:

//change the buttons styling
.sqs-block-button-element--large {
  opacity: .9 !important;
  background: transparent !important;
  background-image: url('https://static1.squarespace.com/static/59179bed725e254491573a21/t/5f913569aa51500a54567b09/1603351915660/blue-button.png') !important;
  background-position: center !important;
  background-size: auto 150px !important;
  background-repeat: no-repeat !important;
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
}
a.sqs-block-button-element--large {
  padding: 30px 85px !important;
}  
.sqs-block-button-element--large:hover {opacity: 1 !important}

.sqs-block-button-element--medium {
  opacity: .9 !important;
  background: transparent !important;
  background-image: url('https://static1.squarespace.com/static/59179bed725e254491573a21/t/5f913563b5b1d138262a5460/1603351907486/gold-button.png') !important;
  background-position: center !important;
  background-size: auto 150px !important;
  background-repeat: no-repeat !important;
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .5));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .5));
}
a.sqs-block-button-element--medium {
  padding: 30px 85px !important;
}
.sqs-block-button-element--medium:hover {opacity: 1 !important}

A second opinion would be helpful.

Seems fine here. Do you still need help?

On 10/23/2020 at 6:35 AM, tuanphan said:

Seems fine here. Do you still need help?

@tuanphanYes please. They are still not rendering correctly. The padding puts extra space around the buttons, still is not rendering the full background-image, and shifts the position when the copy goes from one line to two. Example: https://lakerenfaire.com/virtual-faire-events/italian-mask-making

On 10/23/2020 at 6:35 AM, tuanphan said:

Seems fine here. Do you still need help?

@tuanphanWere you able to revisit. Further thoughts and suggestions?