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?

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>