Код из статьи проходит валидацию.
Встала задача, сделать активную кнопку с надписью. Вариант с javascript довольно громоздкий, и неинтересный, кроме того он меняет картинку, и нужно делать для сходных кнопок с разным текстом по 2 картинки на каждую. Сделаем через CSS, тут достаточно всего 2-х картинок, а текст на кнопке можно написать какой угодно.
В файле css пишем следующее:
.go {float:left;
padding:2px 0px 0px 11px;
height:25px; width:90px; font-family:Georgia, tahoma;
font-size:17px;
color:#FFFFFF;
text-decoration:none;
background-image: url(images/click_here.gif);}
.go:hover {background-image: url(images/click_here_over.gif);}
В первой строке (.go) описываем параметры надписи на кнопке и подкладываем картинку фона кнопки. Во второй (.go:hover) меняем картинку кнопки на ту, которая будет при наведении мышки.
В html добавляем простую ссылку с классом и надписью на кнопке:
<a class=go href=”#”>перейти</a>
Собственно и все. Пример.
Поделиться в соц.сетях
Похожие записи
Мне нравится! | ||
| Нравится | ||
7 comments
ZavRab says:
Окт 16, 2009
Да, но ведь кнопка догрузилась когда я навел на нее, а это плохо
xela says:
Окт 17, 2009
Ну а в чем проблема сделать предзагрузку картинки? Кроме того, если картинка маленькая, то она загружается быстро и не особенно заметно, а потом из кэша вылетает мгновенно.
гость says:
Окт 31, 2009
xela
Как сделать предзагрузку картинки?
xela says:
Ноя 1, 2009
Просто вставьте ее в любое место страницы размером 1х1 пиксель и все. Пользователь ее не увидит, а в кеш браузера она попадет и при наведении на кнопку появится сразу.
Ал says:
Июнь 17, 2010
в таком случае размер кнопок зависит от ширины текста в ней, что в общем подходит для горизонтального расположения кнопок. при вертикальном же расположении выглядеть будет убого, как можно сделать фиксированный размер кнопки ??
Ал says:
Июнь 17, 2010
и еще есть проблема с адресом- сначала автоматически добавляется адрес своего сайта, а потом адрес нужного ресурса, следовательно перейти никуда невозможно
xela says:
Июнь 24, 2010
Ал, делал именно для горизонтального расположения, уже давно, под мои нужды все работает, я думаю особенных сложностей для переделки там нет.