[Andreas BjerveParticipant]

Hi,

I´ve added a button with an optin-trigger link in my revolution slider. I want the original button look provided by the Rev. Slider, but once linked it takes on the global link style (underlined etc.).

How do I get around this?

Thanks!

[Andreas BjerveParticipant]

This reply has been marked as private.

[LelyModerator]

Hi Andreas,

Thank you for the credentials.
From checking, you have added an Text/HTML layer in revslider and then add the button inside. Please note that the design you have added on the layer using Style tab and also other tabs will be added on the text layer wrapper. Then inside this text/html wrapper is your button. The global settings applied because it is more specific than what you have on the style option. If you add just text instead of link tag, it will be applied. When adding a button, please choose BUTTON Layer instead.See attached screenshot and this screencast:http://screencast-o-matic.com/watch/cbn6im61qt

Hope this helps.

[Andreas BjerveParticipant]

Thanks, so where do insert the optin-trigger within that button? (a href=”#” class=”manual-optin-trigger” data-optin-slug=”byyrzaftyzdz4ctu”></a). I tried using the Actions tab, but can’t make the button work…

🙂

[RadModerator]

Hi there,

You can continue using the text layer, but what default would you like to implement? You can use it’s class name to make your link styled the same as the default one.

Example,

<a href="#" class="manual-optin-trigger Sports-Button-Light rev-btn rs-hover-ready" data-optin-slug="byyrzaftyzdz4ctu"></a>

Thanks.

[Andreas BjerveParticipant]

Thanks, that worked fine in the rev. slider preview, but on the page the button turns blue, like a link again..hmmm..

and, once fixed, how do I edit the font family and font size in that button?

Thanks a lot!

🙂

[ChristopherModerator]

Hi there,

Please provide us with URL of page in question where you added revslider.

Thanks.

[Andreas BjerveParticipant]

url is: andreasbjerve.com (home page)

thanks

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.rev-btn, .rev-btn:visited {
    outline: 0!important;
    box-shadow: none!important;
    text-decoration: none!important;
    line-height: 44px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    padding: 12px 35px !important;
    font-family: Roboto,sans-serif !important;
    cursor: pointer;
    color: #fff;
    border: 3px solid #fff !important;
}

Hope that helps.

[Andreas BjerveParticipant]

Thanks, that’s perfect! Last thing is that I’d like a hover color, slightly off-white/grey. What code to I implement for this?

Thanks again 🙂

[LelyModerator]

Hi There,

Please use this custom CSS:

.rev-btn:hover {
    color: grey;
}

Hope this helps.

[Author]

Posts