How can I modify button roundness and hover animation?

Store Design
1

I’ve tried the following code to no avail.

.button, .customer button, .shopify-challenge__button {border-radius: 100px;}

Additionally, is there a way to change the hover animation? It does a side-to-side button animation, but I’d prefer a simple color change or highlight effect.

Website is https://test-kds01.myshopify.com/?_ab=0&_fd=0&_sc=1 with password as “password01”

2

try this :slightly_smiling_face:

.btn-theme { 
border-radius: 50px !important; 
}
3

Thank you! Any idea how to change the button hover animation? The animation now has the original square/rectangular edges despite the inactive button being round. Would prefer the hover to just change the button color rather than a left to right swipe color change.

4 
.btn-theme:hover:before { 
border-radius: 50px !important; 
}

Try this.

If this solved your issue Mark it as an Accepted Solution.