The effects of alcohol on sustanon 250 leucine for – real weight loss & bodybuilding benefits?
How to change the c...
 
Share:
Notifications
Clear all

[Solved] How to change the color of Social login buttons

3 Posts
3 Users
1 Reactions
1,086 Views
Posts: 4
Topic starter
(@master)
Active Member
Joined: 4 years ago

Hi there! I've faced the following problems with Social login buttons.

1) How to change the color of Social login buttons?

2) How to change the color of Social login buttons on hover?

3) How to change the font color of Social login buttons?

4) How to change the font color of Social login buttons on hover?

5) How to change the size of Social login buttons?

Are htere any solutions how to solve the problems?

Thanks in advance,

Master

2 Replies
Asti
Posts: 7572
 Asti
Support
(@asti)
Illustrious Member
Joined: 7 years ago

Hi @master,

1) How to change the color of Social login buttons?

You should use the CSS code below: 

#wpdcom .wpd-social-login .wpdsn-fb i {
background-color: #4267B2;
}

Just change the red marked value before using.

2) How to change the color of Social login buttons on hover? 

Solution: 

#wpdcom .wpd-social-login .wpdsn-fb i:hover {
background-color: #4267B2;
}

The codes should be put in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again. Please don't forget to press Ctrl+F5 (twice) on the frontend before checking.

Please note, that we don't provide support for style customization, we may help in 1-2 simple questions related to colours and background but not more. We can not help you customize all components of website style, these are custom requirements and should be done by website owners. We only help with general questions and issues.

Thank you for your understanding.

You can find all classes by pressing F12 on the browser and opening Chrome or Firefox Console, it'll help you easily write CSS rules you need to customize. 

CSS

This website should help you to write CSS rules:   https://www.w3schools.com/cssref/default.asp

Posts: 1
(@davidjohn)
New Member
Joined: 2 months ago

To change the color of social login buttons:

Using a Plugin: Go to the plugin’s settings and look for color customization options.
Custom CSS: Add custom CSS via Appearance > Customize > Additional CSS:
css
Copy code
.social-login-buttons .facebook-button {
background-color: #4267B2; /* Example color */
}
.social-login-buttons .google-button {
background-color: #DB4437; /* Example color */
}
Save Changes: Apply and save your customizations.
Check the login page to see the new button colors.

Share: