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

[LynnDesign]

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: 

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

[jakeclifford · Accepted solution]

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 
}

[suyash1]

@LynnDesign - preview link expired

[jakeclifford · Accepted solution]

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 
}

[LynnDesign]

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?

[jakeclifford]

Yes you can add a hover state with this code 

.banner__content .button:hover {

border: 1px solid red 

}

[LynnDesign]

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?

[jakeclifford · Accepted solution]

Add important 

.banner__content .button:hover {

border: 1px solid red !important

}

[LynnDesign]

It works, thanks for your help and time! 😃

[jakeclifford]

Glad to Help ! 😀

[yb2808]

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

[PageFly-Richard]

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

[LynnDesign]

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? 🙂