Solved

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

LynnDesign
Excursionist
15 0 2

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

 

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

 

Locko_1-1663982810208.png

 

 

 

Accepted Solutions (2)

jakeclifford
Shopify Partner
28 6 14

This is an 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 
}

Jake Clifford | Shopify Developer | jakeclifford.com
Focused on building amazing looking and high converting custom stores on shopify
To Hire me send DM or email jakeclifford35@gmail.com

View solution in original post

jakeclifford
Shopify Partner
28 6 14

This is an accepted solution.

Add important 

 

.banner__content .button:hover {

border: 1px solid red !important

}

Jake Clifford | Shopify Developer | jakeclifford.com
Focused on building amazing looking and high converting custom stores on shopify
To Hire me send DM or email jakeclifford35@gmail.com

View solution in original post

Replies 11 (11)

suyash1
Shopify Partner
9266 1152 1495

@LynnDesign - preview link expired

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

jakeclifford
Shopify Partner
28 6 14

This is an 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 
}

Jake Clifford | Shopify Developer | jakeclifford.com
Focused on building amazing looking and high converting custom stores on shopify
To Hire me send DM or email jakeclifford35@gmail.com
LynnDesign
Excursionist
15 0 2

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
Shopify Partner
28 6 14

Yes you can add a hover state with this code 

 

.banner__content .button:hover {

border: 1px solid red 

}

Jake Clifford | Shopify Developer | jakeclifford.com
Focused on building amazing looking and high converting custom stores on shopify
To Hire me send DM or email jakeclifford35@gmail.com
LynnDesign
Excursionist
15 0 2

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
Shopify Partner
28 6 14

This is an accepted solution.

Add important 

 

.banner__content .button:hover {

border: 1px solid red !important

}

Jake Clifford | Shopify Developer | jakeclifford.com
Focused on building amazing looking and high converting custom stores on shopify
To Hire me send DM or email jakeclifford35@gmail.com
LynnDesign
Excursionist
15 0 2

It works, thanks for your help and time! 😃

jakeclifford
Shopify Partner
28 6 14

Glad to Help ! 😀

Jake Clifford | Shopify Developer | jakeclifford.com
Focused on building amazing looking and high converting custom stores on shopify
To Hire me send DM or email jakeclifford35@gmail.com
yb2808
Visitor
1 0 0

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

PageFly-Richard
Shopify Partner
4287 973 1627

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

LynnDesign
Excursionist
15 0 2

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