[johncastroParticipant]

Hi There,

I know you guys will be able to help here. I am using the code below for two buttons on my home page.

1. One as you can see is for when the button is clicked a pop up video starts. CODE:
[button class=”btn-lightbox” href=”https://www.youtube.com/embed/8YDmWN5vnA4?autoplay=1″ size=”large”][icon type=”play”]watch intro video[/button] [lightbox selector=”.btn-lightbox”]
<p>What is Wilson Luna TV.</p>

2. Two is for when people hit this button they are displayed with a pop up lead capture box. CODE:
[button type=”transparent” shape=”square” size=”large” href=”https://wilsonluna.leadpages.co/leadbox/140aea473f72a2%3A106b3afaa346dc/5718016125829120″ title=”FREE TRIAL”][icon type=”check”]CLAIM YOUR $1 TRIAL[/button]
<p>No Risk. Cancel Anytime.</p>

What I want to do is make both buttons white and when hovered over red [color code: #8a0202]. I want them white as my default settings are grey but do not want to change that. Can you help?

[Paul RModerator]

Hi,

Thanks for writing in!

You can add a class to your buttons then target it in your css codes to change it colors.

eg.

[button class="btn-lightbox my-btn" href="https://www.youtube.com/embed/8YDmWN5vnA4?autoplay=1" size="large"][icon type="play"]watch intro video[/button] [lightbox selector=".btn-lightbox"]
<p>What is Wilson Luna TV.</p>

[button class="my-btn" type="transparent" shape="square" size="large" href="https://wilsonluna.leadpages.co/leadbox/140aea473f72a2%3A106b3afaa346dc/5718016125829120" title="FREE TRIAL"][icon type="check"]CLAIM YOUR $1 TRIAL[/button]
<p>No Risk. Cancel Anytime.</p>

Then add this in custom > css in the customizer.

.my-btn {
    color: #fff;
    border-color: #fff;
}

.my-btn:hover {
    color: red;
    border-color: red;
}

Hope that helps

[johncastroParticipant]

Thank you. Great service as always! This worked 🙂

[Rue NelModerator]

Hello There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts