[Resolved] Button CSS Help

Home Forums Support [Resolved] Button CSS Help

Home Forums Support Button CSS Help

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #634376
    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!

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #634424
    Leo
    Staff
    Customer Support

    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.

    #634539
    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;  
    }
    #634805
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.