[Resolved] Button CSS Help

[Derek]

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!

[Leo]

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.

[Derek]

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;  
}

[Leo]

Cool 🙂

[Author]

Posts