I want to add a link on my header that has a colored box around it making it look like a button

Support
#1

I want to add a link on my header that has a colored box around it making it look like a button.

Our website is growhealthyvending.com

The goal is to create a link/button that says request information.

Can you help with this?

#2

Hi There,

Could you please add the new menu item(request information) to your header menu so we can provide the custom CSS?

Thanks.

#3

i have added it to the menu.

#4

Hello There,

Please add following CSS code to have a button effect and let us know how it goes:

li#menu-item-137 {
    background-color: #a0d62f;
    border-radius: 47px;
    margin-top: 2px;
}

li#menu-item-137:hover {
    background-color: #7b9a7d;
    opacity: .7;
}

li#menu-item-137 span {
    color: #fff;
}

li#menu-item-137 span:hover {
    color: #151212;
}

Please change color code as per your specifications.

Thanks.

#5

i placed it in the global css and it did nothing…

#6

That code didn’t work.

#7

Hi there,

The code Prasant provided should work but there is a CSS error on the CSS codes that are in the customizer.

Please see the attach image and add a closing curly brace } to that CSS block.

#8

It worked! You are phenomenal! Thank you @Prasant Prasant and @Jade

#9

You’re most welcome :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.