Change Button Color

Hello,

I was wondering how I can change the color of the button?

from transparent to other colors in the content, not in the header. Thanks!

Hello,

Transparent buttons can be changed with custom css code below. There is default and hover state, so use them both if you want, and of course change color values to your liking.

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

a.roll-button.border:hover {
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #ffffff;
}

You can use this plugin in order to apply the code https://wordpress.org/plugins/simple-custom-css/

Best Regards

Thank you! This is my web: lireng.net. I just want to change the color of one button (“ABOUT ME”) on the front page but not all the buttons. I used call to action widget for the button but I want the background color to be like “Click here to Begin” Button on the header. Anyway I can achieve this? Thanks again!

Hello,

Yes, that can be achieved, use chrome developer tools to target ID of that button, or its holding element, or fix your site since you were changing something and there is now an error:
Parse error: syntax error, unexpected ‘{’ in /home/lirengne/public_html/wp-content/themes/sydney/widgets/fp-call-to-action.php on line 122

After fix, we can prepare css for you.

Best Regards

It is fixed now.

Hello again,

For “ABOUT ME” button, apply custom css code below and change color values to your liking:

div#panel-4591-1-0-1 a.roll-button.border {
    color: #000000;
    background-color: #ffcc00;
    border: 1px solid #000000;
}

div#panel-4591-1-0-1 a.roll-button.border:hover {
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #ffffff;
}

Best Regards

Thank you so much! Also, the photos look very squeezed when switching from PC(big screen) to a laptop (smaller screen), so I wonder what should I do so that the photos’ sizes won’t change like that in the demo? Thanks again!

Hello again,

First thing - always use same image sizes for project featured images, and second remove your modifications, or just update theme to newer version and they will be overridden because you have added custom css styling inside main theme stylesheet. For example css code below is present inside your stylesheet, and it do not exist within original theme (it is squeezing images):

.project-item.item img {
    	height: 426px;
    	width: 640px;
}

In total, there is 78 lines of css code which is added.

Best Regards

Hi,
I want to change “scroll to top” button color and default button color to this color code “fe374a” My site is “http://www.360businessintelligence.com”.

Also i want to change the color of the icons in the footer (Eg: Call to Action Icons such as Mail,contact phone number and address), to this color code “fe374a”

Please help me .

@Arrvind

Hello,

Apply custom css code below in order to change colors:

/*back to top color*/
a.go-top {
    background-color: #fe374a;
}
/*back to hover top color*/
a.go-top:hover {
    background-color: #fe374a;
}

/*footer icons color*/
.footer-widgets .sydney_contact_info_widget span {
    color: #fe374a;
}

You can apply custom css code with custom css plugin or if you are using latest WordPress version from Appearance > Customize > Additional CSS.

Best Regards!

Thank you so much it worked like Magic…

You’re welcome,

Bests!