title: Styling List Buttons
body: <p>Using a list, I want to create a list of links as in the image </p>
  
  <p><img src="https://i.stack.imgur.com/H66En.jpg" alt="HTML List with CSS background images"></p>
  
  <pre><code>&lt;div id="toolbarbottom" class="toolbar" style="position: fixed; clear: both; overflow: visible; bottom: 0px; left: 0px; width: 100%;"&gt;
       &lt;ul&gt;
           &lt;li id="active"&gt;&lt;span&gt;&lt;a id="current" href="#add" class="button"&gt;News&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;span&gt; &lt;a href="#Updates" class="button"&gt;Updates&lt;/a&gt;&lt;/span&gt; &lt;/li&gt;
           &lt;li&gt;&lt;span&gt;&lt;a href="#Contact" class="button"&gt;Contact Us&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;span&gt;&lt;a href="#Website" class="button"&gt;Website&lt;/a&gt; &lt;/span&gt;&lt;/li&gt;
           &lt;li&gt;&lt;span&gt;&lt;a href="#Refresh" id="#Refresh" class="button"&gt;Refresh&lt;/a&gt;&lt;/span&gt; &lt;/li&gt;
       &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am kind of stuck on the CSS (button) and probably the spacing between the list elements.  to make the list appear in this form. Anyone with an idea of how I can tackle this please?</p>