Inte lika på webben som i HTML editorn.

<div align="center">
    <a href="http://www.sweclockers.com/" class="btn">Sweclockers</a>

a.btn:hover {
    background: url('bilder/knapp5.png');
}

 <style type="text/css">

I princip så kan man säga, värdet i class attributet är bara ett namn på en eller flera påhittade klasser avdelade med mellanslag.

Därtill har man oftast en eller flera CSS regler som väljer ut alla html element som har en viss klass och lägger på en style, vilket i ditt fall som du säger anges i <style> segmentet.

I ditt fall så väljer regeln ut alla <a> element som har en klass med namnet btn, där man även har fört muspekaren över, och lägger på en bakgrundsbild.

Se även:
https://www.w3schools.com/css/css_howto.asp

Du kan se och testa olika regler direkt här:
https://www.w3schools.com/cssref/trysel.asp

Mer info och syntax:
https://www.w3schools.com/css/css_syntax.asp
https://www.w3schools.com/cssref/css_selectors.asp

Ett tips är att ha menyn längs upp så att man slipper scrolla till botten varje gång.

Om du vill göra det väldigt enkelt så finns det ju en del färdiga gratis mallar som man kan ladda ner och använda, dom flesta använder sig av en del populära css och javascript bibliotek som oftast har allt du behöver.

Du kan till exempel kika här:
https://startbootstrap.com/template-categories/portfolios/

Sedan finns det även webbhostingfirmor som har färdiga mallar där man sätta upp och redigera allt via webben om man vill vara riktigt slapp, men det är ju inte lika roligt!