Modify Dynamic Menu to Button

[Bluto]

The below code produces a dynamic menu which sorts my content dynamically (without a page load).  I'm trying to move this menu into a series of buttons, but not matter what I try,  I can't figure out how to do it.

Here is what the existing menu looks like:

 

Here is the existing code for the menu:

<ul class="ipsButtonRow ipsPos_right ipsClearfix">
  {{if isset( $table->sortOptions ) and !empty( $table->sortOptions )}}
      <li>
          <a href="#elSortByMenu_menu" id="elSortByMenu_{$table->uniqueId}" data-role='sortButton' data-ipsMenu data-ipsMenu-activeClass="ipsButtonRow_active" data-ipsMenu-selectable="radio">{lang="sort_by"} <i class="fa fa-caret-down"></i></a>
          <ul class="ipsMenu ipsMenu_auto ipsMenu_withStem ipsMenu_selectable ipsHide" id="elSortByMenu_{$table->uniqueId}_menu">
              {{$custom = TRUE;}}
              {{foreach $table->sortOptions as $k => $col}}
                  <li class="ipsMenu_item {{if $col === $table->getSortByColumn()}}{{$custom = FALSE;}}ipsMenu_itemChecked{{endif}}" data-ipsMenuValue="{$col}" data-sortDirection='{{if $col == 'title'}}asc{{else}}desc{{endif}}'>
                      <a href="{$table->baseUrl->setQueryString( array( 'filter' => $table->filter, 'sortby' => $col, 'sortdirection' => ( $col == 'title' ) ? 'asc' : 'desc', 'page' => '1' ) )}">{lang="{$table->langPrefix}sort_{$k}"}</a>
                  </li>
              {{endforeach}}
          </ul>
      </li>
  {{endif}}
</ul>

 

Here is the code for the content:

<ol class='ipsDataList ipsDataList_zebra ipsClear cCmsListing {{foreach $table->classes as $class}}{$class} {{endforeach}}' id='elTable_{$table->uniqueId}' data-role="tableRows">
	{template="$table->rowsTemplate[1]" params="$table, $headers, $rows" object="$table->rowsTemplate[0]"}
</ol>

 

Here is the series of buttons I created:

<div class='ipsGrid ipsGrid_collapseTablet ipsGrid_collapsePhone ipsSpacer_bottom' >
	<div class='ipsGrid_span5 ipsType_contained'>
		<div class="ipsType_veryLarge"> 
          	<div class='ipsGrid ipsGrid_collapseTablet ipsGrid_collapsePhone' >
                <div class='ipsGrid_span4 ipsType_contained'>
                    <a class="ipsButton ipsButton_normal ipsButton_fullWidth" href="(link)">NEWEST</a>
                </div>  
                <div class='ipsGrid_span4 ipsType_contained'>
                    <a class="ipsButton ipsButton_normal ipsButton_fullWidth" href="(link)">VIEWS</a>
                </div> 
                <div class='ipsGrid_span4 ipsType_contained'>
                    <a class="ipsButton ipsButton_normal ipsButton_fullWidth" href="(link)">UPDATED</a>
                </div> 
  			</div>
		</div>
	</div>
</div>

 

Thanks in advance for your help!