30 сент. 2008 г.

Как реализовать кнопку, не используя, собственно, кнопку?

Вопрос достаточно интересный. Как сделать эмуляцию кнопки, которая реагирует на наведение курсора не прибегая к слайд-эффектам, основанным на ява-скриптах? С помощью CSS - очень просто. Для меня, кстати, было настоящим открытием, что в CSS свойство "hover" применимо практически к любому элементу. Но, обо всем по порядку. Сначала - вот она, кнопка:



А вот ее код:

CSS
#button {
width: 60px;
height: 30px;
background: url(1.jpg);
}
#button:hover {
width: 60px;
height: 30px;
background: url(2.jpg);
}

#button a {
text-decoration: none;
font-size: 18px;
}
#button a:hover {
text-decoration: none;
font-size: 18px;
}

HTML:

<body>
<div id="button"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
</div>


Неразрывных пробелов добавлять по вкусу до тех пор, пока область ссылки начисто не перекроет область эмулированной кнопки.

А можно поступить проще и написать текст кнопки в ссылке, вместо пробелов. А для того, чтобы ссылка полностью перекрывала область кнопки - правильно расставить padding'и. Тут уж все зависит от вашей фантазии.
-----------------------------------------------------


Хостинг изображений - radikal.ru

3 комментария:

  1. Unknown2 октября 2008 г. в 03:26

    Единственное, в IE6 это работать не будет - эти мудни разрешают hover применять только к ссылкам :(

    ОтветитьУдалить
  2. sordes2 октября 2008 г. в 08:44

    По данным всемогущей статистики шестой осел уходит в небытие постепенно:-) В течении года уйдет совсем. "Я так думаю" (с)

    ОтветитьУдалить
  3. Анонимный15 октября 2008 г. в 03:17

    background надо было один только сделать, спрайтом, а то мигает при плохом коннекте.

    Хороший блог, подписался)

    ОтветитьУдалить

Подписаться на: Комментарии к сообщению (Atom)