Стиль кнопки в верхней панели в Foundation?

Question

Возможно ли, что в Zurb Foundation есть нормальная кнопка в пунктах меню верхнего бара? Вот пример:

Черная кнопка, что я пытаюсь сделать.

Вот что HTML в настоящее время выглядит следующим образом:

<div class="contain-to-grid"> 
    <nav class="top-bar" data-topbar="" role="navigation"> 
    <ul class="title-area"> 
     <li class="name"> 
     <h1> 
      <a href="/">SiteName</a> 
     </h1> 
     </li> 
     <li class="toggle-topbar menu-icon"> 
     <a href="#"><span>Menu</span></a> 
     </li> 
    </ul> 

    <section class="top-bar-section"> 
    <ul class="left"> 
     <li> 
     <a href="#">Nav item</a> 
     </li> 
     <li> 
     <a href="#">Nav item</a> 
     </li> 
     <li> 
     <a href="#">Nav item (Should be button)</a> 
     </li> 
    </ul> 
    </section></nav> 
</div> 

Answer 1

Конечно, просто использовать класс button внутри элемента в has-form списка.

<li class="has-form"> 
     <a class="button">Button</a> 
    </li> 

Демо: http://codeply.com/go/00cVHQ15Px

Answer 2

Попробуйте, как это может быть?

* {font-family: Segoe UI;} 
 
nav ul, 
 
nav ul li {margin: 0; padding: 0; list-style: none; background: #99f; overflow: hidden; display: inline-block;} 
 
nav ul li a {text-decoration: none; display: block; width: 100px; margin: 10px; padding: 5px 10px;} 
 
nav ul li a.btn {background: #333; color: #fff; text-align: center; border-radius: 3px;}

<nav> 
 
    <ul> 
 
    <li><a href="#">New Button</a></li> 
 
    <li><a class="btn" href="#">New Button</a></li> 
 
    <li><a href="#">New Button</a></li> 
 
    </ul> 
 
</nav>