Buttons mit mouseover Effekt

Ich möchte meine Navigationsleiste mit Buttons verschönern. Ich habe jeweils 2 Bilder mit Photoshop erstellt. Ich finde im Netz aber irgendwie nicht das richtige habe ich das Gefühl. Ich finde überall nur CSS Beispiele wo ich die Buttons komplett selber erstelle. Kann mir da jemand helfen?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<script src="/js_webseite/jquery.js"></script> <nav> <button class="butt" id="button1">Button1</button> <button class="butt" id="button2">Button2</button> <button class="butt" id="button3">Button3</button> <button class="butt" id="button4">Button4</button> <button class="butt" id="button5">Button5</button> <button class="butt" id="button6">Button6</button> <button class="butt" id="button7">Button7</button> <button class="butt" id="button8">Button8</button> <button class="butt" id="button9">Button9</button> <button class="butt" id="button10">Button10</button></nav> <script> $('.butt').click(function(){ alert(this.id); }) </script>