How to Make Primary Button Color a Gradient

Store Design
1
Show More

Hi! I need my Primary Button to be a gradient color. The hex codes are: #e1b555, #ffdfb9, #a27b2c.

It would have to go from the right to left too. I believe this a simple change in style.css but I struggle with finding the class name for the primary button color change, if anyone could help that would be great! The theme is ‘Debut’

2

hello @blakelower , can you please send your website link here. So i can help you with this.

3

Yes this is the site: https://virtual-skin-care.myshopify.com/

4

Your store is password protected. Go to Online Store > Preferences > Password Protection and provide us with the password so we can see your store and give you a CSS solution.

5

Password is disabled now, you should be able to see it.

6

You can change your buttons with this at the end of your theme.css.liquid file in your assets folder:

.pxs-image-with-text-button {
    background: linear-gradient(to left, #e1b555, #ffdfb9 50%, #a27b2c 100%);
}

.home-promotion-button {
    background: linear-gradient(to left, #e1b555, #ffdfb9 50%, #a27b2c 100%);
}

input[type="submit"] {
    background: linear-gradient(to left, #e1b555, #ffdfb9 50%, #a27b2c 100%);
}

I think that takes care of most of them.

3 Likes
7

Hello, can you help me make my buttons clickable on my banners & the buttons gradient?