How to make a Transparent Sydney call to action button?

Hello All.

How to I make or turn the Sydney call to action button transparent? I have searched online and this forum. I have found the CSS codes but when I copy and paste and try differnt ways and locations where to paste the CSS code. The call to action button is still red. I can change the color but I cannot make it trasparent with white letters like I see in other sites. If you can please help I would greatly aappreciated.

Hello there,

Try adding this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.roll-button {
  background-color: transparent;
  border-color: transparent;
  color: #fff000;
}

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

If it doesn’t change anything, use this code:


.roll-button.border {
  background-color: transparent;
  border-color: transparent;
  color: #fff000;
}

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

Regards,
Kharis

Wow thank you very much it worked. The first CSS code was the one that worked, but what is odd is that it did not work the first time, then I tried the second code and did not work, tried the first code again and it worked. I changed the colors to white as well. Again thank you very much for your help.

You’re welcome!

Feel free to open a new topic if you have any other else to ask.

Regards,
Kharis

It did not work for me :frowning:

Hi @jamesbrion,

Here are some workarounds to verify if your site can’t carry the new CSS code addition.

  • Log in to your site admin area, and clear site cache (if you have a cache plugin enabled)
  • Validate all of you custom CSS code with this tool and make sure it doesn’t produce any error

If it doesn’t change anything, please share the link to your page here and point me which button you’d like to style; what does the button read?

Regards,
Kharis

Hi Kharis,

Thanks for your response. I already resolved the issue by using another button plugin instead. The only problem i have is the text slider size in home page. When i switched to mobile view it doesnt change the size , its too BIG… Below is the current CSS code using simple CSS

.text-slider h2.maintitle {
color: #006caa;
font-size: 30px;
font-style: regular;
}

.text-slider p.subtitle{
color: #ffffff;
font-size: 20px;
font-style: regular;
}

is there anything i need to add here?

regiconservices.com is the home page… the text slider is too big when switching to mobile view

Use media query to only apply specific style targeted on a certain maximum device screen size. For instance:


@media only screen and (max-width:639px) {
  
  .text-slider .maintitle {
    font-size: 20px !important;
  }
  
  .text-slider .subtitle {
    font-size: 14px !important; 
  }  
  
}

Check this media queries list.

Regards,
Kharis