Как реализовать кнопку, не используя, собственно, кнопку?
Вопрос достаточно интересный. Как сделать эмуляцию кнопки, которая реагирует на наведение курсора не прибегая к слайд-эффектам, основанным на ява-скриптах? С помощью CSS – очень просто. Для меня, кстати, было настоящим открытием, что в CSS свойство “hover” применимо практически к любому элементу. Но, обо всем по порядку.
#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=”#”> </a></div>
</div>
Неразрывных пробелов добавлять по вкусу до тех пор, пока область ссылки начисто не перекроет область эмулированной кнопки.
А можно поступить проще и написать текст кнопки в ссылке, вместо пробелов. А для того, чтобы ссылка полностью перекрывала область кнопки – правильно расставить padding’и. Тут уж все зависит от вашей фантазии.
—————————————————–
Хостинг изображений – radikal.ru
В тему: