squarespace-7.1 How to change the pill button outline color

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:

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!

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:

 

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

My testing

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

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

Hi,

I also want to make a gradient outline button, but with no solid fill on normal, only on active, can someone please help?

website is https://celery-coyote-65h5.squarespace.com/ / p.word: apf

Thanks!

Holly

1 hour ago, hostyle01 said:

I also want to make a gradient outline button, but with no solid fill on normal, only on active

I'm not seeing a sign up button on that page. Is the button on a different page? What is the URL?

@creedon  sorry that was my original design, but I changed the button text. I just wanted to use the gradient button for all medium button instances and the button in the nav. Thanks! 🙂