Jump to content

How to change the pill button outline color

Recommended Posts

Site URL: https://lynx-ukulele-swwd.squarespace.com/

Hi, I'm trying to change the border color of the pill button to a gradient color:

576014848_ScreenShot2022-03-14at6_54_31PM.png.ad80875a09bc57ba252909d6e1851b73.png

 

This is the code that's not working for me (only the border width does)

.primary-button-style-outline .sqs-button-element--primary {
    border-width: 3px !important;
    border-color: linear-gradient(to top, #CC0066, #FEA844) !important;
}

Site URL: https://lynx-ukulele-swwd.squarespace.com/

pw: bwddogs

 

Thanks!

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

17 hours ago, coffeenclouds said:

Site URL: https://lynx-ukulele-swwd.squarespace.com/

Hi, I'm trying to change the border color of the pill button to a gradient color:

576014848_ScreenShot2022-03-14at6_54_31PM.png.ad80875a09bc57ba252909d6e1851b73.png

 

This is the code that's not working for me (only the border width does)

.primary-button-style-outline .sqs-button-element--primary {
    border-width: 3px !important;
    border-color: linear-gradient(to top, #CC0066, #FEA844) !important;
}

Site URL: https://lynx-ukulele-swwd.squarespace.com/

pw: bwddogs

 

Thanks!

Try this solution

#block-yui_3_17_2_1_1646936511559_5688 a  {
  border: 16px solid transparent;
  border-image: linear-gradient(45deg, red , yellow);
  border-image-slice: 1;
}

But it can make radius for border

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.c1b276d721f87bf7b617df17505814ad.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
12 minutes ago, coffeenclouds said:

@bangank36 Thank you! I cant seem to figure out how to apply the radius though. The inside hover color stays the rounded shape, while the border has corners. I tried the border-radius css but i dont know where to apply that.

You can try it in my code for somehow

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.