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;
 }

Answer 2

在 Internet 上搜索按钮生成器，您可能会找到类似的东西。上述链接的快速结果可能是：

.menu-item {
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  border-radius: 12px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #3498db;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.menu-item:hover {
  background: #3cb0fd;
  text-decoration: none;
}