How to convert a menu item into a button

1. Add a regular menu item via to your menu via Appearance>Menus section.

2. Add the class "button" to the "CSS Classes" field.

3. Style the button with the next CSS codes by adding them to Theme Options>Asvanced options>CSS code field:

/*Added buttons in Main Menu*/#mainMenu > ul > li.button {    font-size: initial;    height: auto;    line-height: initial;    margin: initial;    border: none;    background-color: transparent;    padding: 0 15px;    position: relative;    margin-left: 2px;}#mainMenu > ul > li.button > a {    position: unset;}#mainMenu > ul > li.button > a:before {    content: "";    display: block;    position: absolute;    width: 100%;    height: 25px;    left: 0;    top: 50%;    transform: translateY(-50%);    border-radius: 3px;    z-index: -1;    background-color: #CA0027;}@media (max-width: 991px) {    #mainMenu > ul > li.button {        padding: 0;        margin-left: 0;    }    #mainMenu > ul > li.button > a {        display: inline-block;        padding: 7px 20px;        margin: 10px 0;        background-color: #CA0027 !important;        color: #fff !important;        height: auto;        line-height: 1;        border-radius: 3px;    }    #mainMenu > ul > li.button > a::before {        display: none;    }}

4. Change CSS values (like background-color etc) according to your needs.