How can I alter the button color on my website?

Store Design
1

Hi,

im looking to change this button color to white with black border on desktop

before and after hover *
my site is https://luxurymrkt.com

E2CFDC77-BF25-4431-9CCF-2AB79BD75299.jpeg
E2CFDC77-BF25-4431-9CCF-2AB79BD75299.jpeg1170Ă—2532 232 KB

1 Like
2

Hi @Luxurymrkt ,

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> theme.css ->paste the below code at the bottom of the file.
@media only screen and (min-width: 768px){
#shopify-section-template--15648732545205__1655737516587c7b13 .btn {
    background: #fff;
    color: #000;
    border: 2px solid #000;
}
}
3

Hi @Luxurymrkt !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation

Please paste this code at the bottom of theme.css under assets in theme code files

.btn,.rte .btn,.shopify-payment-button .shopify-payment-button__button–unbranded,.spr-container .spr-button,.spr-container .spr-summary-actions a::hover {
background: white !important;
color: black !important;
border: 1px solid black !important;
}

.btn,.rte .btn,.shopify-payment-button .shopify-payment-button__button–unbranded,.spr-container .spr-button,.spr-container .spr-summary-actions a{
background: white !important;
color: black !important;
border: 1px solid black !important;
}

Best Regards;

PageFly

4

@Luxurymrkt

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
#shopify-section-template--15648732545205__1655737516587c7b13 .btn:hover {
    background: #000;
    color: #fff;
    transition: none;
}
1 Like