Change color of button on homepage

[flammagreg]

Hi guys,

Website: seraneeva.com

I've been stuck on this for a while. How can I change the colors of the just the button on the first image of the homepage? I'd like it to have black text and a white background.

[Made4uo-Ribe]

Hi @flammagreg 

do you mean this one ?

if it is check 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:

a.btn.homepage-section-btn {
    color: black !important;
    background: white !important;
}

And Save.

[flammagreg]

Yes, but I'd like to change the color without the on hover animation going away

[Made4uo-Ribe]

Check this one if it work, I try to over ride the code that is been there. If this is not working you need to find that codes. 

Just to clarify, if you want to change the background white also the white border? or you want to make it black? 

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 "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.slider-section--template--16653911326857__image_slideshow_a7Vfe6 .block-section--image_cCB3MV .homepage-section-btn {
    color: unset;
}
a.btn.homepage-section-btn:before {
    background: rgb(255 255 255 / 100%) !important;
}
</style>

And Save. 

[ayeshamisal]

To change the color of the button on the homepage, you can locate the CSS selector for the button element in your website's stylesheet. Then, simply adjust the "background-color" property to the desired color value. 

[Vinsinfo]

@flammagreg Please follow the below steps to change the colors of the button on the first image of the homepage. Let me know whether it is helpful for you.

1. Go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Collection" block under the "Slideshow" section to edit like in the below attached screenshot.

4. Locate the bottom of the section and search for the "Button text" option and "Button background" option.

5. Click the "Button text" and "Button background" options to edit and choose the respective color you want display for the button text and its background like in the below attached screenshot.

Then the final output will be like,

If you are not asking for this section, please share screenshot of the section your are asking to share solution based on it.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[flammagreg]

I have the same options select as you and this is what is looks like: 

[Vinsinfo]

@flammagregIt seems you have fixed it. Since it is the default option in the Envy theme, it should work correctly. The screenshot you provided may be affected by other codes. Please reach out to me if any assistance is needed.

[BSSCommerce-B2B · Accepted solution]

Hi @flammagreg, i can help you to change the color without the on hover animation going away.
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

a.btn.homepage-section-btn {
    color: black !important;
}
a.btn.homepage-section-btn::before {
    background-color: white !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you