Создание кнопки плоского меню без изображений

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

Ищите генераторы кнопок в Интернете, и вы можете найти что-то вроде этого. Быстрый результат по указанной ссылке может быть:

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