cara agar tampilanLINK HALAMAN FILE "A" sinkron dengan tampilan LINK HALAMAN FILE "B"

di html ada kode membuat halaman saya buat tiga halaman yaitu:beranda, donate, masukan

<a href="namafiledilaptopkita.html">Beranda</a>
<a href="new.html">Donate</a>
<a href="masukan.html">Masukan</a>

NAH! lalu saya menambahkan bumbu css didalemnya sehingga menjadi seperti ini:

<a button href="HillyHtml.html" class="btn beranda">Beranda</a>
<a button href="new.html" class="btn new"> Donate </a>
<a button href="masukan.html" class="btn masukan">Masukan</a>

DAN DI FILE CSS saya beri kode:

.btn {
    border: none;
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
}
.beranda {background-color: #4dd2ff}
.beranda:hover {background-color: #33ccff;}

.new {background-color:  #ff3333;}
.new:hover {background: #ff1a1a;}

.masukan {background-color: #99ffbb;}
.masukan:hover {background: #80ffaa;}

NAH! di halaman berandanya jadi begini TAPI dihalaman lain (donate dan masukan) malah begini

NAH! gimana tuh caranya agar tampilanya sama disemua halaman