Можно ли в HTML разместить текст на 3D-кнопке?
Я хочу использовать на своем веб-сайте красивые трехмерные изображения кнопок. Однако в настоящее время это работает так: текст является частью изображения.
Итак, когда я хочу изменить текст (или создать новую кнопку), это займет 10 минут, а не 20 секунд.
Я видел несколько веб-сайтов, на которых есть пустая кнопка с текстом.
Настоящая уловка - сделать изображение весь интерактивным. Мне удалось сделать ссылку внутри изображения видимой, но это плохой интерфейс. Пользователи будут ожидать, что нажмут кнопку в любом месте, и отказ от них расстроит их.
Похоже, они оборачивают тег .DIV с фоном изображения вокруг гиперссылки.
<Div (class w/ image> <a> text </a>
ПРИМЕР: https://www.box.net/signup/g
У кого-нибудь есть понимание или объяснение того, как это работает? '
КОД ОБРАЗЕЦ
<a href = "#" class = "button" style = "position: relative;left:-5px;"
onmousedown = "return false;"
onclick = "document.forms['register_form'].submit(); return false;">
<span>
My text
</span>
</a>
Ответы 5
возможно что-то вроде
a {
width: something ;
height: something;
display: block;
background: url('hi.png');
}
также,
input { background: url('hi.png'); }
альтернатива
Сделайте кнопку фоновым изображением:
<style>
div.button a {
display: block;
width: /* image width */;
line-height: /* image height */;
text-align: center;
background: url(/* image uri */) no-repeat;
}
</style>
Поможет ли вам установка привязки на display: block и присвоение ему высоты / ширины, равной вашему div / фоновому изображению?
Ваш пример просто помещает стили CSS в тег a ...
Оттуда:
Тег:
<a onclick = "document.forms['register_form'].submit(); return false;"
onmousedown = "return false;" style = "position: relative; left: -5px;"
class = "button" href = "#">
<span>Continue</span>
</a>
Обратите внимание, что они по какой-то причине используют JS, а не href, мне это не нравится.
Затем класс кнопки:
a.button
{
background:transparent url(../img/greenbutton2.gif) no-repeat scroll left top;
font-size:16px;
height:42px;
line-height:42px;
width:155px;
}
Вот как это сделал сайт, на который вы ссылались.
Я нашел это весьма впечатляющим. Использование GWT для стилизации гиперссылок.