Button style in top bar in Foundation?

Question

Is it possible in Zurb Foundation to have a normal button in the top bar menu items? Here is an example:

The black button is what I'm trying to accomplish.

Here is what the HTML currently looks like:

<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

Sure, just use class button inside a has-form list item.

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

Demo: http://codeply.com/go/00cVHQ15Px

Answer 2

Try like this, may be?

* {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>