Featured Product - Remove rectangular border

Hi there,

I added a ‘Featured Product’ section to my homepage and I would like to remove the rectangular border from the ‘buy now’ button.

I’ve tried using ‘border: none !important;’ but it didn’t work. I was also told to try the following code:

.button {
border: none;
}
but did not work either. It is very annoying as I would like to just show the rounded button without the rectangular border but I can’t seem to remove it. I’ve also read that shopify prevents users from editing checkout buttons unless you have the Plus Plan, is that why I can’t edit it?
I am also attaching an image of the custom code I have written so far for the button.
Thanks everybody

Hi @Anakin94 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
You can try below code:

button {
    border: none !important;
    box-shadow: none !important;
}
button:after,
button:before {
   display: none !important;
}

I hope it would help you
Best regards,

Richard | PageFly

Hey @PageFly-Richard , thank you so much for your help, it worked!

May I also ask you how can I remove the same rectangular border from the ‘Quantity Selector’ block?