Help changing button color

Store Design

Topic summary

A user seeks to invert button colors on their contact page—changing the background to white and text to black.

Two CSS solutions provided:

  1. Targeted approach: Add specific CSS to the end of base.css file:

    • Targets #ContactForm .contact__button .button
    • Sets white background and black text using !important flags

  2. Broader approach with hover states: Add CSS via Theme Customizer’s Custom CSS section:

    • Targets multiple button selectors (.contact-form button, submit inputs)
    • Includes hover effect that reverses colors (black background, white text)
    • Provides more comprehensive styling coverage

Status: The issue remains open—the original poster has not confirmed which solution worked or if the problem is resolved. Both solutions use CSS overrides with !important declarations to ensure the styling takes precedence.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I need help inverting the colors of the button in my contact page, i want the background of the button to be white and the text to be black

store- blissbloom.shop

Screenshot (23)
Screenshot (23)1366×768 79.9 KB

2

@blissbloomaesthetic please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

#ContactForm .contact__button .button {background: #fff !important; color: #000 !important;}
3

Hi @blissbloomaesthetic You can do this by adding a little CSS override. Go to Online Store → Customize → Theme settings → Custom CSS and paste the code below:

.contact-form button,
.contact-form input[type=“submit”],
button[type=“submit”] {
background-color: #ffffff !important; /* white background /
color: #000000 !important; / black text */
}

.contact-form button:hover,
.contact-form input[type=“submit”]:hover {
background-color: #000000 !important; /* black background /
color: #ffffff !important; / white text */
}