Можно ли поместить текст на 3d кнопку в HTML?

Question

Я хочу использовать красивые 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>

Answer 1

Сделать кнопку фоновым изображением:

<style>
div.button a {
    display: block;
    width: /* image width */;
    line-height: /* image height */;
    text-align: center;
    background: url(/* image uri */) no-repeat;
}
</style>

Answer 2

Я нашел это довольно впечатляющим. Использование GWT для стилизации гиперссылок.

Answer 3

Ваш пример просто помещает стили CSS в тег ...

Оттуда:

тег:

<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;
}

Вот как это сделал сайт, на который вы ссылались.

Answer 4

Поможет ли установка вашего якоря для отображения: блок и придание ему высоты / ширины, равной вашему div / background image?

Answer 5

возможно что-то вроде

a { 
   width: something ; 
   height: something; 
   display: block; 
   background: url('hi.png'); 
 }

также

input { background: url('hi.png'); } 

является альтернативой