Custom CSS to change hover/select colors of links & buttons

Shapely
1

Hi there,

I have a couple of related questions around getting things to happen on hover/click with buttons and links:

  1. How can I change the link hover and Select colour of my social menu (not the widget one, just one I made)? I’ve added some custom CSS but it doesn’t seem to work:
.bg-dark .social-list a {
	color: #DDFF00;
	opacity: 1;
}
.bg-dark .social-list a:hover {
	color: #f81b84;
	opacity: 1;
}

The first item changes the links from .5 opacity (per the original shapely theme) to 1, and that works great. But the hover color doesn’t change. For reference, this is in the bottom right corner of my page www.hollyburton.ca

  1. I’m having the same issue changing color on select/hover with the back to top button. I added this custom css and it also doesn’t seem to work:
.back-to-top .fa {
	color: #DDFF00;
	opacity: 1;
}
.back-to-top:hover {
	color: #fff;
	opacity: 1;
}
.bg-dark .back-to-top {
	border-color: #DDFF00;
}
.bg-dark .back-to-top:active, .bg-dark .back-to-top:focus {
	color: #f81b84;
}
  1. How can I change the font colour on the opaque button on the static front page when I mouse over it? I change the background colour when I mouse over to yellow and the while becomes too hard to see. What about for the “transparent” button? Also, just for curiosity, what section of the CSS code are these buttons found in?

Thanks,

Holly

2

Hi Holly,

I hope you are well today and thank you for your questions.

1) How can I change the link hover and Select colour of my social menu (not the widget one, just one I made)? I’ve added some custom CSS but it doesn’t seem to work:

You can try changing their hover color by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

#social li a[href*="linkedin.com"] .fa:hover{
  color:#000;
}
#social li a[href*="facebook.com"] .fa:hover{
  color:#fff;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

2) I’m having the same issue changing color on select/hover with the back to top button. I added this custom css and it also doesn’t seem to work:

Use the below CSS code to change it.

.back-to-top:hover .fa{
  color: #000;
}
.bg-dark .back-to-top:hover{
    border-color: #000;
}
3) How can I change the font colour on the opaque button on the static front page when I mouse over it? I change the background colour when I mouse over to yellow and the while becomes too hard to see. What about for the “transparent” button? Also, just for curiosity, what section of the CSS code are these buttons found in?

The buttons are created in the various files of the theme but please do not make changes in these files because if you make changes in the theme file then you have to make these changes again after theme updation as changes made in the theme files get lost on theme updation.

You can use the below CSS code to change the text color on button hover.

body .btn:hover, 
body .woocommerce #respond input#submit.alt:hover, 
body .woocommerce a.button.alt:hover, 
body .woocommerce button.button.alt:hover, 
body .woocommerce input.button.alt:hover, 
body .woocommerce #respond input#submit:hover, 
body .woocommerce a.button:hover, 
body .woocommerce button.button:hover, 
body .woocommerce input.button:hover{
  color: #000 !important;
}

To make the button transparent you can use RGBA color by referring the information here CSS3 RGBA Color Code Generator | Toptal®

Best Regards,
Movin