Иногда не хочется заморачиваться с лишними скриптами, кодами, да и с картинками для создания кнопки с перекатом (ролловером).
Ведь для ролловера нужно как минимум 2 картинки (2 разных изображения).
С помощью CSS можно сделать небольшой оптический обман, при котором будет заметен эффект нажатия кнопки.
Приведённый ниже код нужно вставить или между тэгами или в ваш файл, например: style.css
Эффект заключается в небольшом смещении фона т.е. картинки на 1 пиксель вниз и вправо.
Если у вас кнопки с другими размерами, поменяйте ширину и высоту в коде, ниже всё подписано.
/* CSS Document */
.knopka_1{
display: block;
background-image: url(images/knopka11.gif); /*Это путь к картинке*/
width: 107px; /*ширина*/
height: 32px; /*высота*/
font-family:Verdana, Arial, Helvetica, sans-serif; /*Шрифты можно изменить*/
text-align: left;
color: white; /*цвет текста*/
font-weight: bold;
font-size:12px;
text-decoration: none;
line-height: 32px; /*высота*/
}
a.knopka_1:hover{
display: block;
background-image: url(images/knopka11.gif); /*Это путь к той же картинке*/
width: 107px; /*ширина*/
height: 31px; /*высота*/
background-position: 1px 1px;
font-family: Verdana, Arial, Helvetica, sans-serif; /*Шрифты можно изменить*/
text-align: left;
color: white; /*цвет текста при наведении*/
font-weight: bold;
font-size: 12px;
text-decoration: none;
padding-left: 1px;
padding-top: 1px;
line-height: 31px; /*высота*/
background-repeat: no-repeat
}