DEMETR Создание сайтов в Казани

Опубликовано

Создание кнопок из ссылок

При создании шаблонов для Joomla очень часто использую один простой пример, который позволяет оформлять ссылки красиво. Единственное условие для организации этого, необходимо, чтобы анкор ссылки был заключен в span, т.е. иметь следующий вид:

<a href=’#’ title=title’><span>Добро пожаловать</span></a>

Пункты меню в Joomla как раз выводятся в таком формате.

Далее рисуем в фотошопе фон для кнопки, и разрезаем на две части. Левая будет короче. В моем случае ее размеры 7*31. Правую часть делаем шире, она будет резиновой, и тянуться в соответствии с длинной ссылки.

Теперь осталось только прописать стили для ссылок:

a.btn, a.btn:visited{
background:url(../images/button-left.png) top left no-repeat;
display:block; height:31px; line-height:31px; float:left; margin:0 10px 0 0;
color:#666; text-decoration:none;
text-shadow:1px 1px 2px #FFF;
}
 
a.btn span{
background:url(../images/button-right.png) top right no-repeat;
display:block;
margin:0 0 0 7px; padding:0 7px 0 0;
}
 
a.btn:hover{color:#333;}

Следует обратить внимание, что у ссылки ставим display:block, и задаем высоту. Свойство line-height будет равно высоте. Теперь про span, который внутри ссылки: сдвигаем его вправо на ширину левой картинки, в моем случае 7px (margin:0 0 0 7px). Плюс ко всему делаем отступ справа (padding:0 7px 0 0).

Пример можно посмотреть здесь.

Создание кнопок из ссылок: 4 комментария

  • Юлия — 17.01.2011 в 13:47 #

    Посмотрела пример. При увеличении количества символов (+12 символов) появляется разрыв фона кнопки. Получается кнопка тянется до определенного предела?

    [Ответить]

  • Demetr — 17.01.2011 в 13:59 #

    Конечно. Будет тянуться до ширины картинки button-right.png. Сделайте ее в 400px на всякий случай, и будет вам счастье.

    А мне для работы часто хватает 200.

    [Ответить]

    Skylucky - Ноябрь 25th, 2011 в 15:07

    А пример то и не работает 🙁

    [Ответить]

    Demetr - Ноябрь 25th, 2011 в 15:27

    Переезжал на другой хостинг. Папку с демо случайно удалил.

    [Ответить]