navigazione tra pagine

[quiris!]

io voglio collegare un bottone per la precisione questi due << >> a delle pagine 1 2 3 e cosi via.. facendo svariate ricerche in javascript ho scoperto onclick non so se è giusto ho provato svariate funzione ma i tasti non funzionano potete darmi uno snippet

<div class="page">
<ul id="pagina">
<li><button class="controls" id="prova">&laquo;</button></li>
<li><a id="prev" href="prova.html" title="vai a pagina 0">0</a></li>
<li><a id="next" href="prova.html" title="vai a pagina 1">1</a></li>
<li><a id="prev" href="#" title="vai a pagina 2">2</a></li>
<li><a id="prev" href="#" title="vai a pagina 3">3</a></li>
<li id="prev"><a href="#" title="vai a pagina 4">4</a></li>
<li><a href="#" title="vai a pagina 5">5</a></li>
<li><a href="#" title="vai a pagina 6">6</a></li>
<li><a href="#" title="vai a pagina 7">7</a></li>
<li><a href="#" title="vai a pagina 8">8</a></li>
<li><a href="#" title="vai a pagina 9">9</a></li>
<li><a id="next" href="#" title="vai a pagina 10">10</a></li>
<li><button class="controls">&raquo;</button></li>
</ul>


</div>


ul#pagina {
font: 12px Arial, sans-serif;
margin: 1em 0;
padding: 0;
list-style: none;
text-align: center;
display: block;
}


ul#pagina li {
display: inline;
margin-right: 0.5em;
}


ul#pagina a {
text-decoration: none;
border: 1px solid #1258CC;
padding: 0 3px;
background: #3C86FF;
color: #FFF;
}


ul#pagina a:visited {
background: #EEE;
color: #003EA5;
border-color: #89B5FF;
}


ul#pagina a:hover {
background: #FFF;
color: #003EA5
}


ul#pagina li#currentpage a {
border: 0px;
background: #FFF;
color: #000;
cursor: default;
}


.controls {
display: none;
}
manca js