Hello there,

I'm trying to implement a custom menu button with different style than other menu items to catch the visitor's attention. I managed to make the button almost work by adding the following css:

header#top nav > ul > li.btn_rounded a {
color: #ff5f00;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 30px !important;
border: 1px solid #ff5f00;
border-radius: 30px;
}

header#top nav > ul > li.btn_buy a:hover {
border: 1px solid #27CFC3;
color: #27CFC3;
}

header#top nav > ul > li.current_page_item.btn_rounded a {
border: 1px solid #27CFC3;
}

However when I scroll the page, top margin becomes too big, and then the text is too low in comparision to other menu items. Also, when I click the button, it becomes selected before the border does. I guess I'm missing override from some selected state...

If I want to have custom button like this, which other parts of css do I need to change? I want the mobile menu to look the same as does by default. Thanks.

Unfortunately site does not have a domain yet, and I'm developing in locahost, so this is not possible. I don't know if this helps at all, but what I am basically trying to do is menu item with orange font and border ("Osta" button in image below).

Example image

I did this by adding the above css classes for "Osta" menu item in Salient menu control panel. However this customization still has problems described above, since I am not sure what other parts of css I need to change. Is it possible to write css based on this information?