making 3 piece button come together properly in css - css

Question

Ok, So I have 6 files in total.
button_01.png (left side of the button)
button_01-RO.png (role over)
button_02.png (middle)
button_02-RO.png (role over)
button_03.png (right side of the button)
button_03-RO.png (role over)
below is a link to the images. They are listed in the order above.
http://imgur.com/fPIkNAW
http://imgur.com/3ZWVuzz
http://imgur.com/iQVzaf2
http://imgur.com/BsT6WiI
http://imgur.com/mpGZxAu
http://imgur.com/GOXRwdj#5
Here is the Fiddle link
http://jsfiddle.net/gC2L3/
I have the below code. But the left and right image is not setting in the right place. It's just going over top of the text. I'm very new at doing this level of buttons. I've search everywhere on how to do this and I've not been able to find a way to do it with the role over. And my attempt below is clearly not working. Everyone here has always been very helpful. I'm hoping someone here will know how to do this. I've spent over 4 hours trying different things to get this to work and now I give up and hoping someone here can help. Please and Thank you. Everything works, just the left and right are not placed properly.
<style>
li.link-button {
float: left;
background: url('/opserv/assets/button_02.png') repeat-x;
}
.link-button a {
font-family: Arial;
color: White;
text-decoration: none;
background: url('/opserv/assets/button_01.png') left no-repeat;
}
.link-button span {
padding-left: 8px;
padding-right: 8px;
background: url('/opserv/assets/button_03.png') right no-repeat;
}
li.link-button:hover {
float: left;
background: url('/opserv/assets/button_02-RO.png') repeat-x;
}
.link-button:hover a {
font-family: Arial;
color: White;
text-decoration: none;
background: url('/opserv/assets/button_01-RO.png') left no-repeat;
}
.link-button:hover span {
padding-left: 8px;
padding-right: 8px;
background: url('/opserv/assets/button_03-RO.png') right no-repeat;
}
</style>
<ul>
<li class="link-button">
<span>Press Me</span>
</li>
</ul>

Answer 1

A small jQuery script would do it. You could use something like this: http://api.jquery.com/toggleclass/

Answer 2

Ok, Did some more research and actually found the answer. Hopefully this will help someone in the future. you'll have to change the height and width to patch your images.
.selector{
color: white;
position: relative;
height: 24px;
text-decoration: none;
margin: 0 11px;
border: 0;
background: url('Center.png') repeat-x;
}
.selector::before,
.selector::after {
content: ' ';
position: absolute;
top: 0;
width: 11px;
height: 24px;
}
.selector::before {
left: -11px;
background: url('Left.png') left no-repeat;
}
.selector::after {
right: -11px;
background: url('Right.png') right no-repeat;
}