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