I can change the colour of an individual button - but how can I make it a gradient instead of a block?

Site URL: https://chinchilla-chicken-nanw.squarespace.com/

I use the following code to customise individual buttons but want to change to to a gradient

#block-e594bfd6c486b80b7d2b

.sqs-block-button-element{background-color:#ffffff!important}

Can someone please help?

Hello,

Changing the color from a solid to gradient is easier than you might think and you've already done the hard part in the code you shared above!

You'll want to find a gradient style and color scheme that fits your needs but your code would look something like this:
 

#block-e594bfd6c486b80b7d2b
.sqs-block-button-element {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

You can find preset web gradients here or create your own here.

Hope this helps.

@Wolfsilon super helpful, thank you very much!

@brianbyrne7 Just found some small problems on your site. Do you want to fix these?

Site URL – https://chinchilla-chicken-nanw.squarespace.com/

1. (Mobile-Homepage) Reduce white space?

2. (Mobile-Footer) Reduce logo size?

3. (Mobile-Footer) Place buttons 1, 2 same line?

4. (Tablet-Footer) Place 4 icons same line or change to 2 rows?

5. (Tablet-Homepage) Increase width?

6. (Tablet-Homepage) Increase width?

7. (Tablet-Homepage) Remove Line under banner?

8. (Tablet-Overlay Menu) Add a spacing?

9. (Tablet-Business Email) Remove 2 lines?

10. (Tablet-Business Email) Increase text width or make image/text stacked?

11. (Table-Business Email) Similar above

12. (Tablet) I think some other pages have similar problem.

13. (Tablet-About us) Increase width a bit?

14. (Tablet-Careers)

@tuanphan  Yes, absolutely. I'm just not sure how to, can you advise?

On 5/15/2021 at 1:34 AM, brianbyrne7 said:

@tuanphan  Yes, absolutely. I'm just not sure how to, can you advise?

Q1. It is space inside image. you can remove it from your pc, then upload to your site

Q2. Q3. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* reduce logo size */
div#block-yui_3_17_2_1_1619866025541_12913 {
    width: 50%;
}
/* footer logos side by side */
div#page-section-5f676dbc9c2b2577e3abcea6>.row>.span-3:nth-child(5)>.button-block:nth-child(n+2) {
    width: 40% !important;
    float: left !important;
    clear: none;
}
div#page-section-5f676dbc9c2b2577e3abcea6>.row>.span-3:nth-child(5)>.button-block:nth-child(4) {
    width: 100% !important;
}
}

Try above, if it works, let me know. We will check other issues

@tuanphan - thanks, really appreciate this help.

2&3 has worked well. 1 is difficult as they are rectangular images within a square - I have cropped all 3 images as much as possible but there's still quite a bit of white space

On 5/16/2021 at 4:43 PM, brianbyrne7 said:

@tuanphan - thanks, really appreciate this help.

2&3 has worked well. 1 is difficult as they are rectangular images within a square - I have cropped all 3 images as much as possible but there's still quite a bit of white space

4, 5, 6. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* Footer icons */
div#block-bbcda41e9501de01f6ec nav a {
    width: 45%;
    float: left !important;
    margin: 0 !important;
}
div#block-bbcda41e9501de01f6ec nav a:nth-child(2n+1) {
    margin-right: 10% !important;
    margin-bottom: 10px !important;
}
/* home content width */
[data-section-id="5fbd886a052e8e3c2e098c8d"] .content {
    width: 95% !important;
}
/* home 2 boxes width */
[data-section-id="5fbd817185bfa9327b14b59c"] .content {
    width: 100% !important;
}
}

7. It looks like you solved?

8, 9, 10. It looks like you removed Business Email in menu. Can you share link to that page?

@tuanphan I had taken it offline while I made some other changes - it's now published again if you can recheck?