Custom Button Class - Troubleshooting

[virtualana]

URL: go-vlc.com/practical-advice
Version: Standard

I’m trying to add a custom button class to create an orange button on my site. I’ve also included code for a custom hover effect. For my button element I updated the Class box to orange-button and used the custom CSS listed below. I only applied this custom class to the first button in the first column for testing.

/normal state/
.orange-button {
color: #ffffff;
border-color: #f3901d;
background-color: #f3901d;
}

/hover state/
.orange-button:hover {
color: #ffffff;
border-color: #9cc2e5;
background-color: #9cc2e5;
}

Obviously I’m missing something. Any help would be appreciated!

[thai]

Hi There,

I couldn’t find any orange-button classes on this page: go-vlc.com/practical-advice

Could you please double check?

And also update your custom CSS to this:

/*normal state*/
.x-btn.orange-button {
color: #ffffff;
border-color: #f3901d;
background-color: #f3901d;
}

/*hover state*/
.x-btn.orange-button:hover {
color: #ffffff;
border-color: #9cc2e5;
background-color: #9cc2e5;
}

Let us know how it goes!

[virtualana]

Thanks for the follow up! I originally removed the orange-button class because the page is live and it caused the button to not work properly.

I was able to make it work, but only by putting the custom CSS on that specific page. When I have it in the custom CSS area for the entire site it causes the button to not work properly; the default color stays blue (instead of orange) and hover has no effect at all.

My problem is solved for this page, but how can I implement this custom CSS site-wide? Please note: I have the custom CSS commented out in the area that effects the entire site since it wasn’t working properly.

[rad]

Hi there,

What do you mean by it caused the button not to work? It should only affect the target button even if placed in global custom CSS.

Would you mind implementing it in global custom CSS and let us check it? And please provide some screenshot of what’s not working.

Thanks!