problemi cambio pagina

Ciao sono alle prime armi, ho creato sei pulsanti con la funzione button per accedere alle altre pagine del sito. Il problema sussiste che cliccando su un bottone si apre un'altra finestra, mentre io vorrei accedere nella pagina successiva dalla stessa finestra della home.
Potete darmi una mano? grazie

Codice HTML:

---

<style type="TEXT/CSS">
.bottone{BACKGROUND:orange; FONT-WEIGHT: bold; FONT-FAMILY:Times new roman; width:100; height:25}
</style>
<script language="JavaScript">
function on(colore) {
event.srcElement.style.backgroundColor=colore
}
</script>
<form><input value="Home" class="bottone" onmouseover="on('red')" onmouseout="on('orange')" a href="http://index.html" type="button"></form>

<form><input value="Campionato" class="bottone" onmouseover="on('green')" onmouseout="on('orange')" a href="http://pag2.html" type="button"></form>

---

Non capisco perché complichi tanto le cose. Perché non usare dei normalissimi tag <a> al posto di quei bottoni?

Perché con i bottoni posso dimensionarli e colorarli a piacimento e passandoci sopra col mouse cambiano colore. Posso farlo anche con i tag <a>?
Se si, mi diresti come o magari mi daresti un link per imparare?
Grazie in anticipo.

Col tag a semplicemente gli assegni una classe, esempio

Codice HTML:

---

<a href="/pagina.php" class="link">Collegamento</a>

---

e poi con i CSS crei il bottone.

Spartakavgvsta: quel codice forse poteva andare bene per il secolo scorso, oggigiorno è tutto molto più semplice.

Codice HTML:

---

<style type="text/css">
        .bottone{
                background-color: orange;
                font-weight: bold;
                font-family: Times New Roman;
                display: inline-block;
                width: 100px;
                height: 25px;
        }

        .bottone.rosso:hover{
                background-color: red;
        }

        .bottone.verde:hover{
                background-color: green;
        }
</style>

---

Codice HTML:

---

<a href="destinazione">Collegamento normale</a>
<a href="destinazione" class="bottone">Collegamento con classe <code>bottone</code></a>
<a href="destinazione" class="bottone verde">Collegamento con classe <code>bottone</code> e <code>verde</code></a>
<a href="destinazione" class="bottone rosso">Collegamento con classe <code>bottone</code>e <code>rosso</code></a>

---

Non è il massimo dal punto di vista della semantica, ma è già meglio di quella roba che usi adesso.

ok..grazie mille!!! ci sono riuscito finalmente.
A buon rendere.
ciao