Jump to content

Using image for button in Image block

Recommended Posts

First remove or comment out the following CSS. Make a copy for safe keeping if removing

.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.

.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 10/13/2020 at 8:30 PM, creedon said:

First remove or comment out the following CSS. Make a copy for safe keeping if removing


.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.


.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Hello Thomas, 

It still does not have a transparent background. It is hidden behind the color. 

 

Screen Shot 2020-10-15 at 3.20.29 PM.png

Link to comment

Well I'm a bit stumped at this point. I do see a problem on line 39 on your pic. "https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png" is repeated twice. I think that issue would only prevent the pic from showing up.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...
On 10/13/2020 at 8:30 PM, creedon said:

First remove or comment out the following CSS. Make a copy for safe keeping if removing


.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.


.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Hey Thomas! With your code and a little playing around I got it to work. Also needed to change background color in the section themes to get the background to go away! Thanks for all your help! Here is the code that worked: 

 

//Button in Image Block 
.image-button-inner {text-align: left
 !important;
padding-left: 19px;}

.image-button .image-button-inner {background-image: url( "https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f9cf356ff6048551e2f02da/1604121430733/Logos+FINAL+v3-53.png");
  background-size: 20px;
  background-repeat: no-repeat;}

.image-button.sqs-dynamic-text {font-family: Modernline;}

Screen Shot 2020-10-31 at 8.20.53 PM.png

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.