[Dawn Theme] How change "Add to Cart" button colors?

[namestolen]

I want to change my "Add to Cart" button on my default Product Page.  I want to change the background color, the text color, and the border color.  Thanks in advance!

Also...if you would tell me how to add a border around the main product picture also that would be helpful!

Reference URL:  https://rttrove.com/products/9-ancient-silver-skeleton-dnd-dice-tower

[rajweb]

Hey @namestolen ,

To apply the styling changes for your "Add to Cart" button and add a border around the product image on the product page

Follow these steps:

1. Online Store > Themes > Edit Code 

2. In the code editor, locate and open Assets > base.css(or theme.css).

3. Add the following CSS code at the end of the file:

/* Custom Styles for Add to Cart Button */
.product-form__submit {
    background-color: #28a745; /* Background: Green */
    color: #ffffff; /* Text: White */
    border: 2px solid #ffc107; /* Border: Yellow */
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover Effect for Add to Cart Button */
.product-form__submit:hover {
    background-color: #218838; /* Darker Green on Hover */
    color: #000000; /* Text: Black */
    transform: scale(1.05); /* Slight Zoom Effect */
}

  Save the changes and refresh your product page to check the result.

2. Add a Border Around the Product Image:

In the Assets folder, open base.css (or theme.css).

Add the following CSS at the end of the file:

/* Add Border Around Main Product Image */
.product__media-wrapper img {
    border: 3px solid #343a40; /* Dark Gray Border */
    border-radius: 10px; /* Rounded Corners */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional Shadow */
}

Let me know if this works or if you need further adjustments!

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[Moeed · Accepted solution]

Hey @namestolen 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-form__submit:after {
    box-shadow: unset !important;
}
.product-form__submit {
    border: solid 1px cyan !important;
    background: black !important;
    color: aqua !important;
}
</style>

NOTE: Change the color from the code to however you like.

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[namestolen]

Thanks so much!  How would I add a hover effect if I wanted?