Archived topic
Button CSS Help
3 replies · Started by Derek on July 27, 2018
Hello,
I'm having trouble remembering how I made my buttons back when I was using GP (non-premium) years ago. I can't seem to get a hover effect to work...I know I'm missing something. I was following an online tutorial and it said if the button was a different color upon hover then "your theme was changing the color." Here is the code I'm working with:
input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
color: #7d1f51;
background-color: transparent;
border: 2px solid #7d1f51;
border-radius: 5px;
text-transform: uppercase;I tried copying the above code and changing a.button:visited to a.button:hover, but that didn't work. The button works, but when you hover / click it, then it turns grey like the GP theme.
Thank you for the help!
Hi there,
You are referring to the submit button I assume?
If so try this CSS:
input[type="submit"]:hover {
color: #fff;
background-color: #000;
}Let me know if this helps.
Hi Leo. Thank you. That worked. Here's what I ended up with:
button, html input[type="submit"], a.button, a.button:visited {
color: #7d1f51;
background-color: transparent;
border: 2px solid #7d1f51;
border-radius: 5px;
text-transform: uppercase;
}
button, html input[type="submit"]:hover, a.button, a.button:visited {
color: #fff;
background-color: #7d1f51;
border: 2px solid #7d1f51;
border-radius: 5px;
text-transform: uppercase;
}Cool :)
