How can I change color of header button


Thank you for your work.this is my site link I want to change only header button’s color. I want this to be transparant with white border. How can I do this.


You can apply custom css code below:

a.roll-button.button-slider {
    background-color: transparent;
    border: 1px solid #ffffff;

Easiest way to apply the code is with simple custom css plugin.
Result -

If you want to add border color on hover, also apply custom css code below:

a.roll-button.button-slider:hover {
    border: 1px solid #ff6400;

Hover result -

Best Regards

Hello Dimikjones,

Hope you are well. Thank you for the help.

I was wondering what do we have to add to the CSS in order to also change the text color?

Thank you for your help.

Hello there!

You’re welcome,

Just use color with desired value, like this:

a.roll-button.button-slider {
    background-color: #DA70D6;
    border: 1px solid #DA70D6;
    color: #ffcc00;

You can also use color for hover state if you want to change it for hover also.

Best Regards

Hi dimikjones

Maybe a bit of a noob question :wink: but where do I do the change? design and the editor? because there i cant find this line under Header.

Thank you!

Hello Fermo,

Use folowing plugin in order to apply the code.

Best Regards