Rounded button

Solved
WilliamLekman
Tourist
4 0 1

Hey!

Right now I have added a code that make some of the buttons rounded but not all of them. For example the "Buy now" button is not rounded. My website is careofpets.se and password is "puppy". If there is someone who knows how I can make all of the buttons rounded I would be very pleased. My website is in swedish so if there is any questions, please ask!

Sincerely,

William

Accepted Solution (1)

Accepted Solutions
Shine18pk
Shopify Partner
21 6 13

This is an accepted solution.

Update the code to this: 

 

<style>
.btn, div[role="button"], button[type="button"], button {
    border-radius: 5px !important;
}
</style>

 

Coding is my ninja way

View solution in original post

Replies 14 (14)
Shine18pk
Shopify Partner
21 6 13

Hi William,

 

Add this code in your theme.liquid file before </body> tag.

<style>
.btn, div[role="button"] {
    border-radius: 5px !important;
}
</style>

 

If you want more rounded buttons, try increasing the value from 5 to 10px.

Coding is my ninja way
WilliamLekman
Tourist
4 0 1

Perfect! Now some of my buttons is rounded but my button "Köp nu" is still squared, do you know why?

Shine18pk
Shopify Partner
21 6 13

Can you send me a preview link of the theme where you applied the code, and tell me where the button is which is not round ?

Coding is my ninja way
WilliamLekman
Tourist
4 0 1

https://careofpets.se/ - password "puppy"

If you go down at the page and look at the "Köp nu" button it is still squared after the coding.

Shine18pk
Shopify Partner
21 6 13

This is an accepted solution.

Update the code to this: 

 

<style>
.btn, div[role="button"], button[type="button"], button {
    border-radius: 5px !important;
}
</style>

 

Coding is my ninja way
WilliamLekman
Tourist
4 0 1

Thank you so much! Now it is working:)

taylormcgee
Explorer
58 2 9

Thank you this helped with my theme as well. I want to round the typing fields on my website any idea on what I should do? 

Shine18pk
Shopify Partner
21 6 13

@taylormcgee  Paste this in your theme.liquid file before closing body tag "</body>";

<style>
input[type=text], textarea {
    border-radius: 5px !important;
}
</style>
Coding is my ninja way
taylormcgee
Explorer
58 2 9

This doesnt work for the Pay with Apple Pay Button on Safari nor the Pay with Paypal on Google Chrome

Shine18pk
Shopify Partner
21 6 13

@taylormcgee 

Please post your store's link, so that i can provide you with specific code to make those button edges round. 

Coding is my ninja way
taylormcgee
Explorer
58 2 9

www.stickzus.com : Store Link.

I have the theme Brooklyn

Also if you are able to help me with making the search logo I have on the desktop a drawer on the moblie site. I cant find a result anywhere 

speedough
New Member
1 0 0

Hi I saw your code about your rounded button and I wanted to know if you could help me fix mine. I'm having the same issue with the sharp corners sticking out still. 

Thanks in advance,

Speedough

website: imporetant.com

devbea
New Member
1 0 0

@speedough did you manage to solve that?

JuicyVapeEU
New Member
1 0 0

Hi there,

 

I've tried your code on my theme but only add to cart button is rounded now.

All buttons like "view options" on homepage are still not rounded...

My theme is FLOW

 

I could send you by MP my website link and password.

 

Thanks in advance !