Border on primary button

Solved
tourbrandus
Excursionist
14 0 6

Hello, 

 

I have a button on my homepage that when I move my cursor over it there is a white outline. 

I want the button to be a black outline all the time so I am wondering if there is a way to alter this. 

 

website: tourbrand.us

password: task1data

 

When cursor is hovered over:

Screen Shot 2023-05-31 at 10.48.02 AM.png

 

How it regularly looks: 

Screen Shot 2023-05-31 at 10.48.09 AM.png

 

Accepted Solutions (2)
stearis
Shopify Partner
23 3 5

This is an accepted solution.

Sure, you can add this to your CSS file. 
I guess it is the index.css file in your case.

a.button.button--primary:hover {
    border: 2.5px solid black !important;
}

 

Developer at stearis

View solution in original post

stearis
Shopify Partner
23 3 5

This is an accepted solution.

Yup, you will have to unset the button color:

@media screen and (min-width: 750px)
.banner--desktop-transparent .banner__box {
--color-button: none !important;
}
Developer at stearis

View solution in original post

Replies 4 (4)
stearis
Shopify Partner
23 3 5

This is an accepted solution.

Sure, you can add this to your CSS file. 
I guess it is the index.css file in your case.

a.button.button--primary:hover {
    border: 2.5px solid black !important;
}

 

Developer at stearis
tourbrandus
Excursionist
14 0 6

Thank you for your response. 

 

There is still a white outline between the black and green. 

Is that something that cannot be removed?

stearis
Shopify Partner
23 3 5

This is an accepted solution.

Yup, you will have to unset the button color:

@media screen and (min-width: 750px)
.banner--desktop-transparent .banner__box {
--color-button: none !important;
}
Developer at stearis
tourbrandus
Excursionist
14 0 6

Awesome it worked! thank you so much.