Two Call-To-Action button with different style


I have added two Call-to-action button. But both has the same style. What about two CTA buttons with different hovering effect? The default button style is Bordered, now I need another one with say ‘Bordered – center fill hover’ effect.

When I try to change the style of the default one from WordPress customizer the second one also having the same hovering attributes. Can the stylization of two different CTA button be done?

I am using -

Theme - Sydney Pro
Plugin - Custom JavaScript
Code for second CTA button - jQuery(function($) { var myButton = '<a href="" class="roll-button button-slider" style="margin-left: 15px;">My Button</a>'; $( '.slide-inner' ).append(myButton); });

And I am new to coding.

Thanks in advance.

Hello Tanumoy,

Please try to replace button-slider with border in your code.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hello Roman,

I tried your code. But no luck. What am I missing?

I tried this one - `jQuery(function($) {
var myButton = ‘<a href=“” class=“roll-button border” style=“margin-left: 15px;”>My Button</a>’;
$( ‘.slide-inner’ ).append(myButton);

Here is the link to my website - <a href=“” target="_blank"></a>

Ok. I am sorry I guess I need to give a hyphen before the border. But now there is no border around the CTA button and the text is ridiculously small. Am i missing something again?

Thank you in advance Roman.

By-the-way, Roman those CTA buttons I ma talking about are on header-slider.

Hello Tanumoy,

Can you please try this solution? But again, please replace button-slider with border in jQuery code.

Kind Regards, Roman.