Jump to content

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

Recommended Posts

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.

Link to comment

@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?

chinchilla-chicken-nanw.squarespace.com-

2. (Mobile-Footer) Reduce logo size?

chinchilla-chicken-nanw.squarespace.com-

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

chinchilla-chicken-nanw.squarespace.com-

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

chinchilla-chicken-nanw.squarespace.com-

5. (Tablet-Homepage) Increase width?

chinchilla-chicken-nanw.squarespace.com-

6. (Tablet-Homepage) Increase width?

chinchilla-chicken-nanw.squarespace.com-

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

chinchilla-chicken-nanw.squarespace.com-

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

chinchilla-chicken-nanw.squarespace.com-

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

chinchilla-chicken-nanw.squarespace.com-

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

chinchilla-chicken-nanw.squarespace.com-

11. (Table-Business Email) Similar above

chinchilla-chicken-nanw.squarespace.com-

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

chinchilla-chicken-nanw.squarespace.com-

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

chinchilla-chicken-nanw.squarespace.com-

14. (Tablet-Careers)

chinchilla-chicken-nanw.squarespace.com-

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
exchange-logo.png?format=300w

image.thumb.png.70c95b2d398f31ef30e22721709baa04.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.