Jump to content

Using Background Images to Replace Stock Buttons

Recommended Posts

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.

Link to comment
  • Replies 3
  • Views 570
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.