Call To Action Widget Button Colour

Hi,

I’m building a site with Sydney and noticed all the widget buttons are uniform except the call to action which is inversed (colour fills in on mouse-over instead of emptying out).

How can I change the call to action button so that it matches the others?

webaddress: www.admc.net.au/wp

Thanks!
Nick

Dear Nick,

Thank you for reaching out to us here. You can override the default button’s style by using the below CSS snippet.


.roll-promobox .roll-button{
  background-color: #ff0000;
  border-color: #ff0000;
  color: #fff;
}

.roll-promobox .roll-button:hover{
  background-color: #fff000;
  border-color: #fff000;
  color: #ff0000;
}

Change the hex color code value to any color of your choice to match your design.

You can apply that code to your site through additional CSS option (Appearance > Customize > Additional CSS) or child theme’s style.css.

Regards,
Kharis

Thanks Kharis,

I’ve copied the text into the style.css file in my child theme and it hasnt worked but did work when applied through the additional CSS option and its looking much better which is great!

Out of curiosity, is there a hexcode for a fully transparent background button colour as per the button on the front page slider? I’m thinking about putting a very light grey as the background colour on some of the rows to break it up and want that to come through consistently as well if possible.

Thanks,
Nick

Dear Nick,

For transparent background, you can use transparent value.


.roll-promobox .roll-button{
  background-color: transparent;
  border-color: #ff0000;
  color: #fff;
}

You might be interested to read some possible values associated to the background color property on here http://www.w3schools.com/cssref/pr_background-color.asp.

Regards,
Kharis