How to black outline collection page button

Solved

How to black outline collection page button

AryavK
Trailblazer
266 9 43

Hi Support Team,

 

STORE URL: www.faithandyou.in

THEME: refresh

 

Pls change my collection list view all button from blue to black, it does not fit into my store.

Screenshot 2023-12-02 at 5.20.57 PM.png

and do not reply @florenceharry

you talk so rudely,

can a real shopify expert help me out with this

Thanks!

faith&you
Accepted Solution (1)

Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

Inside your file called base.css on line 1250 add the following code:

    color: black !important;
    --border-offset: none !important;
    border: 3px solid #000 !important;

The code should look something like this:

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  color: black !important;
  --border-offset: none !important;
  border: 3px solid #000 !important;
}

Result:

 

shop.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 2 (2)

Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

Inside your file called base.css on line 1250 add the following code:

    color: black !important;
    --border-offset: none !important;
    border: 3px solid #000 !important;

The code should look something like this:

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  color: black !important;
  --border-offset: none !important;
  border: 3px solid #000 !important;
}

Result:

 

shop.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
AryavK
Trailblazer
266 9 43

you are the goated G🐐

YOU ARE BETTER than everyone

thanks bro,

you are the best

faith&you