Создание 3-х кнопочной кнопки в CSS

Question

Итак, у меня есть 6 файлов.

button_01.png (левая сторона кнопки)

button_01-RO.png (роль окончена)

button_02.png (в центре)

button_02-RO.png (роль окончена)

button_03.png (правая сторона кнопки)

button_03-RO.png (роль окончена)

ниже ссылка на изображения. Они перечислены в порядке выше. http://imgur.com/fPIkNAW http://imgur.com/3ZWVuzz http://imgur.com/iQVzaf2 http://imgur.com/BsT6WiI http://imgur.com/mpGZxAu http://imgur.com/GOXRwdj

Вот ссылка Fiddle http://jsfiddle.net/gC2L3/

У меня есть код ниже. Но левое и правое изображение не в нужном месте. Это просто идет поверх текста. Я очень новичок в этом уровне кнопок. Я всюду искал, как это сделать, и мне не удалось найти способ сделать это с окончанием роли. И моя попытка ниже явно не работает. Все здесь всегда были очень полезны. Я надеюсь, что кто-то здесь будет знать, как это сделать. Я потратил более 4 часов, пробуя разные вещи, чтобы заставить это работать, и теперь я сдаюсь и надеюсь, что кто-то здесь может помочь. Пожалуйста и спасибо. Все работает, только левый и правый размещены неправильно.

<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">
<a href="#"><span>Press Me</span></a>
</li>
</ul>

Answer 1

Хорошо, провел еще какое-то исследование и нашел ответ. Надеюсь, это поможет кому-то в будущем. вам придется изменить высоту и ширину, чтобы исправить ваши изображения.

.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;
}

Answer 2

Небольшой скрипт jQuery сделает это. Вы можете использовать что-то вроде этого: http://api.jquery.com/toggleclass/