If you wish to make your menu items look like buttons, here is how to set your Theme options and the Custom CSS that is required.

In the menu bar settings do the following:
In Menus Items: CSS + box add

{border-radius:15px;border:3px solid #FFEEBB !important;margin:5px;}

In the Mobile Open Submenu Arrow BG: CSS+ box add

{border-top-right-radius:12px;border-bottom-right-radius:12px;}

In the Submenus Background: CSS+ box add

{border-radius:15px;border:3px solid #FFEEBB !important;margin:5px;}

• Only include the border part if you want one
• The Margin value determines the space between menus items
• The border radius on the Mobile Open Submenu Arrow must be equal to the value on the menu items minus the border thickness. In the case above 12px = 15px -3px

 
Note1:
If needing to increase the space after the sub menu arrow indicator use the rules below in the Global Custom CSS Rule Box

.SpecificMenuStyle .menu-hover.menu-arrows .has-submenu > a {padding-right:2em;}
.SpecificMenuStyle .menu-hover.menu-arrows .toggle-submenu::after {right:1em;}

Choices for .SpecificMenuStyle are:
.menu-secondary
.menu-primary
.menu-extra
 
Note 2:
If you want button style in the mini header menu, use a transparent background in the settings, then use

#nav-header-mini a {background-color:grey;padding:5px;border-radius:10px;}

You can see an example below on all the menus using the secondary style.
http://demo.weavertheme.com/menus/
 
Note 3:
If you are using Smart Menus, you will probably want to remove the separation line between menu items on the Vertical mobile menu, or the accordion menu with the rules below

.menu-type-accordion .wvrx-menu.sm li {border-top:none;}
.is-mobile .wvrx-menu.sm li {border-top:none;}