Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Using Background Images to Replace Stock Buttons


MoltoBello

Question

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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...