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
1 Like
@ekrembcc , Could you kindly share your store url and password?
Hi @ekrembcc
Try this one;
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- 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!
1 Like
Thank you so much!!! It worked 
Where do I have to copy the code to make the same for the checkout page?
Kind regards
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!
1 Like
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!
