[Pablo FParticipant]

Hi,

I have an issue creating buttons with links within Rev Slider. The text color is orange even though I´ve selected white or black. When hover, the color changes randomly even though I select another fixed color before.

Can you help me out, please?

I send my site credentials in another private message.

Regards.

[Pablo FParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Pablo,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

.rev_slider .tp-caption.rev-btn  a {
    border: 3px solid red !important;
    color: red !important;
}

.rev_slider .tp-caption.rev-btn:hover a {
    color: blue !important;
    border: 3px solid blue !important;
}

Change red and blue with the color that you like.

Hope that helps

[Pablo FParticipant]

Hi, thank you for your help.

But as you can figure out, some slides have dark and some light backgrounds, so creating a standard color button for all the slides is not a good solution in this case.

Do you know if it could be customized within each slide via Style > Advanced CSS for Idle and Hover States instead?

What doesn´t make sense is Revolution Slider has the feature for selecting each color from the interface, but as we can see it doesn´t work. It looks like it´s a bug that should be fixed, instead of having to force this feature to work via CSS.

Regards.

[Paul RModerator]

Hi Pablo,

You can add a unique class to each button in your slider.

eg.

<a class="vedere-btn" href="http://www.music-group.com/Categories/Behringer/Mixers/Digital-Mixers/X18/p/P0AWZ" target=_blank">VEDERE</a>

Then use that class to target that specific buttons.

.rev_slider .tp-caption.rev-btn  a.vedere-btn {
    border: 3px solid red !important;
    color: red !important;
}

.rev_slider .tp-caption.rev-btn:hover a.vedere-btn {
    color: blue !important;
    border: 3px solid blue !important;
}

Hope that helps

[Pablo FParticipant]

Thank you again,

I have tried it and the color behavior seems to be ok now, but as you can see in the attached image, for some reason the button border is duplicated.

.rev_slider .tp-caption.rev-btn  a.white-green-btn {
    border: 3px solid #FFFFFF !important;
    color: #FFFFFF !important;
}

.rev_slider .tp-caption.rev-btn:hover a.white-green-btn {
    color: #86BB2E !important;
    border: 3px solid #86BB2E !important;
}

[Pablo FParticipant]

Hi again,

I have removed the “3px solid” from:

border: 3px solid #FFFFFF !important;

to

border: #FFFFFF !important;

And now the inner border has gone.

But as you can check at the homepage in the first slide, the hover effect doesn´t work as expected as the text and the border hover effect seems to be unattached so the color of the border and text button don´t change at the same time. The hover makes a kind of random color effect even with no option like that is selected, as far as I know.

PS: Please note that the Revolution Slider that comes with X is 5.1.4 while currently the plugin is 2 versions ahead 5.1.6. Maybe this is a bug already solved in the new versions.

Regards.

[ChristopherModerator]

Hi there,

The first slide button works fine on hover, please see the attachment.

This is the code you have and it works correctly:

.rev_slider .tp-caption.rev-btn:hover a.white-green-btn {
    color: #86BB2E !important;
    border: 3px solid #86BB2E !important;
    padding: 10px 34px 10px 34px;
}
.rev_slider .tp-caption.rev-btn a.white-green-btn {
    color: #FFFFFF !important;
    border: 3px solid #FFFFFF !important;
    padding: 10px 34px 10px 34px;
}

Thanks.

[Pablo FParticipant]

You´re right, after trying several changes in the code, I have realized that the button border must be hidden and the text border visible.

Anyway, please inform the Revolution Slider support about this issue, as it´s supposed these settings (border, color, etc) are customizable directly from the interface without any CSS code.

Regards.

[RupokMember]

Hi there,

Thanks for updating. We’ll try to inform them to accept this as a feature request.

Cheers!

[Pablo FParticipant]

Hi again,

Regarding the buttons created this way, they´re working well on desktop sizes but they look so big when views on mobile browsers (see the capture).

Is there any way to make the button responsive or create a custom slider only for certain browser sizes?

Thank you.

[JadeModerator]

Hi Pablo,

Please try this code:

@media (max-with: 480px) {
    #rev_slider_21_1 ul li:nth-child(3) .rev-btn {
        left: -58px !important;
        top: 8px;
    }
}

Hope this helps.

[Author]

Posts