Change color of button of "service type-a widget"

Hello dears,

I posted this cuz I really could not find a solution for changing the the color of the button of service button type-a widget, so this is the problem:

Lets use this example. I have edit the primary color of my page to blue, and change the color of the text inside the button to red, so when the mouse is NOT INSIDE the button its background is blue and the letter of the text are red, and when the mouse is INSIDE the botton box goes transparent and botton line and text goes color red. (the basic featuring of this widget)

What I looking for is to revert the colors, I want that this the button be transparent when the mouse is not inside the button and be colored when its in.

I hope you got what I’m saying. thanks in advance.
PD: I´m beginner.

Kind Regards.

Hello Diego,

To do that, you’ll need to add the below extra CSS code to Appearance > Customize > Additional CSS from your site dashboard.

.widget_sydney_services_type_a .roll-button {
  border-color: #ff0000;
  background-color: transparent;
  color: #ff0000;

.widget_sydney_services_type_a .roll-button:hover {
  border-color: #143ff8;
  background-color: #143ff8;
  color: #ff0000;

Adjust the hex color code if needed.


I really appreciate your help. It works perfectly.
Thank you so much.

Best Regards.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.


Hello Kharis,

In the code above It dont change the text color ¿how can I change it? I had to change the primary colors and now I have this new problem. please help me out.

Thanks in advanced

Hi Diego,

Please try using this code:

.widget_sydney_services_type_a .content h3,
.widget_sydney_services_type_a .content h3 a {
  color: #ff0000 !important;