• Hi everybody. I need some help with a color of a button. I have a blog: https://www.just3ds.com and I want to change the color of the button: “Shop”. When you go with the mouse over it, it have that difference of shade, so I want, when the cursor is on top of the button, to be different (let’s say, red). I don’t think I must to change something but to add a new code in style.css, which I don’t know ??

    Can you help me with this?

Viewing 10 replies - 1 through 10 (of 10 total)
  • You mean Shop on menu? Or on footer menu? Please make me clear with screenshot.
    Thanks

    @x3voodoo you want the word “shop” to be red or the whole area of shop word to be red ?

    Thread Starter x3voodoo

    (@x3voodoo)

    Here you go. I attached an image: https://i.imgur.com/aPLEKvM.jpg . something like this on the Shop button. And.. also, when you go with the cursor on top of the button, to be brighter. So, only the shop button part to have a different color than the rest of the menu.

    If you can tell me for the footer menu also, I will be happy ??

    Thank you in advance.

    That would be really cool! Is it hard to do?

    Try this

    #menu-item-4376:hover {
    background: red;
    color: #fff;
    }

    Try by adding below CSS code.

    CSS code for changing background color of Shop Menu

    #nav-header ul:last-child li:last-child a {
        background: black;
    }

    CSS code to change the color of Shop menu when hover,

    #nav-header ul:last-child li:last-child a:hover {
        background: blue;

    }

    Note: Child theme is recommended to customize theme.

    Thanks

    Thread Starter x3voodoo

    (@x3voodoo)

    Thank you very much. Very helpful. Now, for the ones who’ll need a similar idea: To change the background with other colors than Black and/or blue, I chose a color like: #36C1BD . Now, depends of the color you want to put. And, in this case was #nav-header, and I wanted to change the footer menu also, so I copied the same code, but I’ve change #nav-header with #nav-footer. Hope it helps for the ones like me ??

    Now, the last question, as I see the above code, “last-child”, I guess it means that the last button to have a specific color, but in case I want to have a different color on the third button, or fifth… how it will be named?

    Thank you again!

    For third button that would nth-child(3) for more info check this article Useful :nth-child Recipes

    Thread Starter x3voodoo

    (@x3voodoo)

    Thank you all! So instead of

    #nav-header ul:last-child li:last-child a {
    background: black;
    }

    will be

    #nav-header ul:last-child li:nth-child(3) a {
    background: black;
    }

    Thank you again.

    Yes, But since there’s little chance of your nav menu to change I suppose you can target more specifically.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Custom Color on a button’ is closed to new replies.