верстка кнопки меню

Всем привет , хочу сверстать меню используя вот этот метод: http://dimox.name/dinamic_link_buttons_with_css/

по коду:
<a href="#" class="button"><span>кнопочка</span></a>

.button {
  display: block;
  color: #FFF;
  background: url(img/button-r.jpg);
  background-position:top right;
  background-repeat:no-repeat;
  padding-right: 23px;
  float: left;
  outline: none;
  text-decoration: none;
  font-size:14px;
}

.button span {
  display: block;
  line-height: 10px;
  background: url(img/button-l.jpg);
  background-repeat:no-repeat;
  padding: 15px 0 15px 23px;
}

.button:hover {
  background-position: 100% -40px;
}

.button:hover span {
  background-position: 0% -40px;
  color: #000;
}

но как применить это к вордпресу если тут внутри тега «a» добавлен тег span , а меню вордпресса ведь генерируеться самим cms. У нас есть только ul li a и все.