Changing button color and size on Debut theme

Solved
Kevin_Maek
Excursionist
13 0 6

Hi

I want to change the color and size of certain buttons instead of only having the option to bulk change them. 

I looked at previous posts about changing buttons in the code editor but I can't seem to figure it out. 

I want to change the SHOP NOW button on the top and bottom of the home page, the LEARN MORE on the middle, and VIEW ALL just underneath that. 

In the shop, the ADD TO CART button is white so it is barely visible, which needs to change. 

If I could be pointed to where to change the numbers for the size, location, and color code for each button, I can figure out the rest. 

My website is: https://perfectexo.com

Please advise

Thanks!

dmwwebartisan
Shopify Partner
5827 1335 1711

This is an accepted solution.

@Kevin_Maek 

Please check the following screenshot. You have to correct your closing brackets. First, you have to add a single closing bracket and with the second arrow, you have to close 2 curly closing brackets.

missing-curly-bracket.jpg

 

After correcting this add the following code at the bottom in your theme.css file.

 .btn, .shopify-payment-button .shopify-payment-button__button--unbranded{
    background-color: #000 !important;
    color: #fff !important;
  }
  .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }
  .template-product button.btn.product-form__cart-submit {
    background-color: #000 !important;
    color: #fff !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Kevin_Maek
Excursionist
13 0 6

Thanks, exactly what I needed. 

Worked like a charm. 

If possible, can you also provide a way to isolate the changes? 

For example, when I change 

 .btn.hero__btn{

It applies to both of my Hero banner buttons (I have 2 hero banner sections for my homepage, and I want to customize each button separately) 

Is that possible to do? 

 

Thanks again!

dmwwebartisan
Shopify Partner
5827 1335 1711

This is an accepted solution.

@Kevin_Maek 

Please add the following separate code for both buttons. I commented there for the first and 2nd shop now button.

/* For the first shop now button */
#shopify-section-hero-1  .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }

/* For the 2nd shop now button */
#shopify-section-1617403904121da62d .btn.hero__btn{
    background-color: #fff !important;
    color: #000 !important;
  }

 

You can change colors as per your need.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Kevin_Maek
Excursionist
13 0 6

Thanks! Worked perfectly after I deleted the initial hero button coding. You're a lifesaver!