Make my button on image banner solid black and add border color

Store Design
1

Hi!

I have a problem where my button is transparent and I can’t change it to solid black bakground. I would also like to add a color border around the button that shows when I have my mouse pointer over the button . Any help will make me forever thankful!

Site url:

https://lynndesign-6937.myshopify.com/https://k276us0epapzv2dc-62425366725.shopifypreview.com

Password: gieyid

The transparent button issue came when I used this line of code below to remove a white box around the button on base css:

.banner__box.color-background-1, .banner__box.color-accent-1 {
background: transparent !important;
}
banner__heading,
.banner__text {
color: #000 !important;
}
.banner__content .button{
background-color: #000 !important;
color: #fff !important;
}

This is how it looks now:

Locko_0-1663981711099.png
Locko_0-1663981711099.png1905×902 593 KB

This is similar to how I would like it to look:

Locko_1-1663982810208.png
Locko_1-1663982810208.png1905×902 592 KB

2

@LynnDesign - preview link expired

3

So the button is showing 0.5 opacity when it is disabled. Add opacity of 1 to the code.

.banner__content .button{
background-color: #000 !important;
color: #fff !important;

opacity: 1 !important
}

EDIT: you can actually remove the importants

.banner__content .button{
background-color: #000
color: #fff

opacity: 1
}

4

Thank you so much! It worked :). Do you also know how to add a red border around the button like in my picture that shows when you put your mouse over the button?

5

Hi @LynnDesign

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css->paste bellow code in top of file

.banner__buttons {

border: 3px solid hsl(11deg 100% 52%);

}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

6

Hi richard!

First of all, thank you so much for your help! It works but not exactly like I would like it too. The red border shows all the time while I would like it to show only when I have my mouse pointer over the button. Do you know how to do that? :slightly_smiling_face:

7

Yes you can add a hover state with this code

.banner__content .button:hover {

border: 1px solid red

}

8

The border only shows for less than a second when I added the code. Is there a way to make it stay as long as I have my mouse over the button?

9

Add important

.banner__content .button:hover {

border: 1px solid red !important

}

10

It works, thanks for your help and time! :smiley:

11

Glad to Help ! :grinning_face:

12

How to make image banner button border transparent and make it underline for permanent