Buy button add color scheme

[ekrembcc]

Hey guys,

I want to change the background color of the buy button, I want to make it a rainbow gradient, like the 1st picture. Is there an App that enables you to choose a color scheme for your buy button ? Or codes maybe?

Best regards

I 

[Made4uo-Ribe · Accepted solution]

Hi @ekrembcc 

Try this one; 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product-form__submit {
    background: linear-gradient(90deg, rgba(0, 209, 255, 1) 16%, rgba(0, 255, 49, 1) 33%, rgba(202, 255, 119, 1) 49%, rgba(252, 43, 43, 1) 66%, rgba(246, 53, 252, 1) 84%);
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[BSSCommerce-B2B]

@ekrembcc, Could you kindly share your store url and password?

[Made4uo-Ribe · Accepted solution]

Hi @ekrembcc 

Try this one; 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product-form__submit {
    background: linear-gradient(90deg, rgba(0, 209, 255, 1) 16%, rgba(0, 255, 49, 1) 33%, rgba(202, 255, 119, 1) 49%, rgba(252, 43, 43, 1) 66%, rgba(246, 53, 252, 1) 84%);
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ekrembcc]

Thank you so much!!! It worked 😍

Where do I have to copy the code to make the same for the checkout page?

Kind regards

[Made4uo-Ribe · Accepted solution]

Only on the cart page? Or also the cart notification.

Replace the code below. Same instruction

For the cart page. 

.product-form__submit, button#checkout {
    background: linear-gradient(90deg, rgba(0, 209, 255, 1) 16%, rgba(0, 255, 49, 1) 33%, rgba(202, 255, 119, 1) 49%, rgba(252, 43, 43, 1) 66%, rgba(246, 53, 252, 1) 84%);
}

And Save. 

With the checkout page and notification:

.product-form__submit, form#cart-notification-form .button, button#checkout {
    background: linear-gradient(90deg, rgba(0, 209, 255, 1) 16%, rgba(0, 255, 49, 1) 33%, rgba(202, 255, 119, 1) 49%, rgba(252, 43, 43, 1) 66%, rgba(246, 53, 252, 1) 84%);
}

And Save. 

result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ekrembcc]

Thank you so much!

Actually I also want to add that rainbow gradient to the button you see below (1st picture). There is a problem I want to solve additionally. When klicking on the button, the page with all products appears (2nd picture). Now since I have only one product, this page has to be replaced. I want the button to direct to the product page. Can you tell me how I can do that?

Thank you very much for your quick replies! 🙏

Kind regards!