html - 创建一个没有图像的平面菜单按钮

Question

我想问一下，我怎样才能实现响应式平面菜单按钮设计不涉及图像，就像下面的按钮只使用css .一直在网上搜索，但大多数菜单按钮都使用图像。

<div class="wrap">
<ul id="menu-secondary-items" class="menu-items">
<li id="menu-item-335" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-335"><a href="#">Business</a></li>
<li id="menu-item-336" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-336"><a href="#">Health &#038; Lifestyle</a></li>
<li id="menu-item-337" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-337"><a href="#">Random</a></li>
<li id="menu-item-340" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-340"><a href="#">Recreation</a></li>
</ul></div>

Answer 1

未测试

 .menu-items li{
      background-color:#29BC9D;
      border:1px solid #42AD95;
      margin:0px 5px;
      padding:10px;
      max-width:150px;
      border-radius: 6px;
      color:#C2F8F4;
      list-style: none;
      display: inline;
 }