HOVER background color for button that says "continue" not changing as it should

Community Forums Forums Design Tips and Tricks HOVER background color for button that says "continue" not changing as it should

This topic is: resolved

This topic contains 6 replies, has 2 voices, and was last updated by  SoZo 1 year, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16241

    Diversified Woman
    Participant
    Post count: 50

    Hope someone can help me correct this since no matter what I try it doesn’t seem to address the issue.  Ugh!

    As part of the Glitter theme on WP, I am trying to make the hover color when someone mouses over the “continuebutton to change to color #B8A12E  (gold). The button when you arelooking at  should have a background color of #668099. It’s just the hover / mouseover color I want to display different in that gold .  

    No matter what I do it does not give me the hover effect in changing the button background color. Ironically however when you look at the sidebar for the “enews button” it functions as it should, with the hover background color going to gold B8A12E .

    I am just trying to make the “continuebutton that appears on the home page below each post excerpt,  do the very same thing but it’s not.  

    HELP! Really scratching my head on this one.

    /* Buttons
    ———————————————————— */

    .enews #subbutton {
       
        border: none;
        border-radius: 20px 20px 20px 20px;
        font-family: ‘Oswald’, Georgia,”Times New Roman”,Times,serif;
        font-size: 12px;
        font-weight: normal;
        height: 28px;
        margin: -10px 0 0 -2px;
        padding: 0 4px 4px 4px;
        text-decoration: none;
        text-transform: uppercase;
        width: 30px;
    }

    input[type="button"],
    input[type="submit"],
    a.more-link {
     background: #758EA3;
     border: 1px dotted #668099;
     color: #fff;
     font-size: 13px;
     font-weight: normal;
     padding: 2px 12px 2px;
     text-decoration: none;
    }

    .enews #subbutton:hover {
     background: #B8A12E;
     color: #fff;
    }

    input:hover[type="button"],
    input:hover[type="submit"],
    a.more-link:hover {
     background: url(images/button.png) 0 -40px;
     cursor: pointer;
     background: #668099;
    }

    #16244

    SoZo
    Moderator
    Post count: 1573

    Please include a link to your site with all questions so that people can see what is going on.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16248

    Diversified Woman
    Participant
    Post count: 50
    This reply has been marked as private.
    #16252

    SoZo
    Moderator
    Post count: 1573

    You’re using the turquoise color option so the link background is set by

    .glitter-gold-turquoise input[type="button"],
    .glitter-gold-turquoise input[type="submit"],
    .glitter-gold-turquoise a.more-link {
    background: #758EA3;
    color: #fff;
    }

    And there is no .glitter-gold-turquoise a.more-link:hover in the style sheet


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16259

    Diversified Woman
    Participant
    Post count: 50

    Can I add that to the  stylesheet to make this work?

    Odd because in the demo for this particular theme it did change colors.

    So is this how I would modify the code to get the desired effect needed?

    .glitter-gold-turquoise input[type="button"],
    .glitter-gold-turquoise input[type="submit"],
    .glitter-gold-turquoise a.more-link {
    background: #758EA3;
    color: #fff;
    }

    .glitter-gold-turquoise a.more-link:hover {
    background: #B8A12E;
    color: #fff;
    }

    #16274

    Diversified Woman
    Participant
    Post count: 50

    Apparently that was the FIX! Thanks for pointing me in the right direction. :)

    #16277

    SoZo
    Moderator
    Post count: 1573

    You’re welcome :)


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘HOVER background color for button that says "continue" not changing as it should’ is closed to new replies.