Jump to content

Active Button Background With Custom Code

By KyleKeigan, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

KyleKeigan Level 4

KyleKeigan

Posted
Posted

@tuanphan Hi! I've uploaded the following code to create a multi-button section on this page: https://sunfish-turbot-cxel.squarespace.com/artwork

Is there a way to make the background of the button black when you're actively on the page that corresponds to the button?

Code: .multi-button {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  &.center {
    justify-content: center;
  }
  &.right {
    justify-content: flex-end;
  }
  .sqs-edit-mode-active .fluid-engine & .sqs-block-button-container {
    width: unset;
  }
}

 

Thank you!!!
Kyle

Link to comment
  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

KyleKeigan
KyleKeigan

As always, THANK YOU! -Kyle

  • Solution
tuanphan Level 17

tuanphan

Posted
  • Solution
Posted

https://sunfish-turbot-cxel.squarespace.com/artwork

Edit this page > Add a Code Block > paste this code 

<style>
  div.multi-button a[href="/artwork"] {
    background-color: black !important;
    color: white !important;
}
</style>

With this page https://sunfish-turbot-cxel.squarespace.com/artwork-light

Add a Code Block 

<style>
  div.multi-button a[href="/artwork-light"] {
    background-color: black !important;
    color: white !important;
}
</style>

With this page

Add a Code Block https://sunfish-turbot-cxel.squarespace.com/artwork-dark 

<style>
  div.multi-button a[href="/artwork-dark"] {
    background-color: black !important;
    color: white !important;
}
</style>

With this page https://sunfish-turbot-cxel.squarespace.com/artwork-color

Add a Code Block 

<style>
  div.multi-button a[href="/artwork-color"] {
    background-color: black !important;
    color: white !important;
}
</style>

 

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
tuanphan Level 17

tuanphan

Posted
Posted
On 12/27/2023 at 5:01 AM, KyleKeigan said:

@tuanphan One last question 🙂

Currently the only hotspot / clickable area is the text. Is there a way to change this multi-button code to make each pill shape clickable? Thanks!

 

Best,
Kyle

I tried disable cursor code on my browser and I see Whole button already clickable. You try disable your custom cursor code, you will see this.

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources