Change style of add to cart button on Brooklyn Theme

[cliff781]

Would like to change the style of the add to cart button. Want the button to be blue background color with white text and also want the button wider to fit the screen on mobile view. 

https://visionprotect.store/products/anti-blue-light-glasses

[PeanutButter]

To make button have blue background and white text:

• Open Sections/product-template.liquid and search for btn--secondary-accent (Your can use the search function by doing CTR-F) It should be around line 227
• Replace btn--secondary-accent with btn--primary-accent and save the file

It should now look like this:

 To make the button full-width:

• Open Assets/theme.scss.liquid and at the end of file add this:

.product-single__add-to-cart {
    width: 100%;
}

This makes the button look like this:

 

Please remember to like and accept my answer if it solves your issue

[cliff781]

Thank you the first part changing colour worked perfectly. 

had issue with second part. When i put the code at the bottom of the file to widen the button, it messed the whole site up, looked funny. Any other way? Thank you

[PeanutButter]

I am 100% sure that code is correct.  If you send me your shopify admin url, which is something like https://example.myshopify.com, I can request collaborator access and fix it for you.

[PeanutButter · Accepted solution]

@cliff781 I added the code to your theme.  The final code I added is the  following:

// Make add to cart button full-width in mobile
.product-single__add-to-cart {
  @include at-query($max, $small) {
    width: 100%;
  }
}