3 buttons on the slider

in the slider I’ve added 2 more buttons using this JS code (Thanks to @kharisblank )

 jQuery(function($) {
       var myButton = '<a href="http://example.org" class="roll-button button-slider">My Button</a>';
       $( '.slide-inner' ).append(myButton);
});

But there’s no margin between them, is it possible to do that?
What about the colours, can I change all 3 of the button colours?

Thanks

Hello,

Can you please provide a link to your website and specify desired colors?

Kind Regards, Roman.

Hi Roman,
Thank you for your reply.

This is the website: http://kumatomedia.com/

I would like to leave the left one (“advertisers”) in the same color
The middle one (“publishers”) in this color: #01A9FF
And the right one (“Cameog”) in this color: #FF7525

Thanks!!

Hello, thank you for the link. Please try to do the following.

  1. Please try to follow instructions in this topic, but use jQuery code from this topic instead (just remove rows that add fourth and fifth buttons from the code to get three buttons, not five).

  2. Then you can add this CSS code in order to change second and third buttons colors (including hover colors):

.roll-button.button-slider.2nd {
    background-color: #01A9FF;
    border-color: #01A9FF;
}

.roll-button.button-slider.2nd:hover {
    background-color: transparent;
    border-color: #01A9FF;
    color: #01A9FF;
}

.roll-button.button-slider.3rd {
    background-color: #FF7525;
    border-color: #FF7525;
}

.roll-button.button-slider.3rd:hover {
    background-color: transparent;
    border-color: #FF7525;
    color: #FF7525;
}

Kind Regards, Roman.

Hi Roman,
I added this to the Custom Javascript plugin to in order to create 3 buttons:

jQuery(function($) {
       var Advertisers = '<a href="https://camelog.com/" class="roll-button button-slider">Advertisers</a>';
       $( '.slide-inner' ).append(Advertisers);
});
jQuery(function($) {
       var Publishers = '<a href="https://camelog.com/" class="roll-button button-slider">Publishers</a>';
       $( '.slide-inner' ).append(Publishers);
});
jQuery(function($) {
       var Camelog = '<a href="https://camelog.com/" class="roll-button button-slider">Camelog</a>';
       $( '.slide-inner' ).append(Camelog);
});

Should I add the CSS code after that and it will work or I missed something…?

By the way,
I’ve added the code with the 5 CTA buttons and it doesn’t appear :confused:

Hello,

I added this to the Custom Javascript plugin to in order to create 3 buttons

Please try to follow all the steps that I mentioned above, including using plugin and jQuery code mentioned in the topic that I linked to above.

Kind Regards, Roman.

Hi Roman,
I followed your instructions but the buttons didn’t appear (even the first button was removed), am I missing something?

Hello,

Please make sure that you added the first button in Customize → Header area → Header Slider section (you should scroll to the very bottom there).

Kind Regards, Roman.

Where do I add this?
When I put it in “additional CSS” it doesn’t do anything

Okay, please try to use this CSS code instead, it should work:

.roll-button.button-slider:nth-of-type(2) {
    background-color: #01A9FF;
    border-color: #01A9FF;
}

.roll-button.button-slider:nth-of-type(2):hover {
    background-color: transparent;
    border-color: #01A9FF;
    color: #01A9FF;
}

.roll-button.button-slider:nth-of-type(3) {
    background-color: #FF7525;
    border-color: #FF7525;
}

.roll-button.button-slider:nth-of-type(3):hover {
    background-color: transparent;
    border-color: #FF7525;
    color: #FF7525;
}

Kind Regards, Roman.

Yes it worked!
Thank you Roman :slight_smile:

Great! You are welcome :slight_smile:

Kind Regards, Roman.