Добрый день, уважаемые читатели блога БЛОGГЕР!

БЛОGГЕРвсегда полезная и интересная информация и в этой статье вы узнаете, как сделать красивые кнопки или как сделать кнопку ссылку.

Довольно часто мне по почте приходят письма, в которых пользователи, после посещения страницы «SEO инструменты для продвижения сайта», спрашивают, а как вы в статье добавили в текст таблицы кнопки или , а как вы сделали такие красивые кнопки. Ведь понятно, что дизайн сайта цена которого достаточно высокая, должен предусматривать красивые кнопки.

Честно говоря я долго раздумывал писать ли эту статью. Дело в том, что на эту тему написано очень много другими авторами. С другой стороны, если возникают у людей такие вопросы, значит им нужно помочь.

Самый простой и быстрый способ создать кнопку, это воспользоваться CSS генератором кнопок. Там все просто. Двигаете ползунки, выбираете цвета, копируете код и вставляете его в вашем шаблоне перед:

]]></b:skin>

Далее, в нужный вам контейнер или таблицу вставляете код ссылки. Для того, что бы ваша ссылка превратилась в кнопку, добавьте в тег < a >, присвоенный вами класс CSS, например: class="button"
Созданную вами таким образом ссылку — кнопку можно наложить поверх какого то изображения.

Как сделать красивые кнопки

SEO инструменты

 Это будет выглядеть необычно. Кроме того, таким образом можно маскировать партнерские ссылки, размещенные в вашем блоге в результате обмена и т.п.

Разместить кнопку по верх изображения можно следующим образом. Добавьте изображение в статью. Затем переключитесь в редакторе сообщения в режим HTML и сразу после контейнера с изображением добавьте код:

Кнопка ссылка

Расположите вашу кнопку поверх изображения изменяя значения показателей left и top. Текст перед ссылкой (в примере он в теге h2) заменяете на свое усмотрение.

Может возникнуть вопрос, почему стиль этого контейнера не прописать в CSS?

Это может быть не практично, потому что изображения в статье могут быть разных размеров и по разному размещены.

Минусом описанного выше способа является то, что при изменении масштаба просмотра в браузере кнопка с текстом будет перемещаться (сдвигаться) относительно картинки над которой они расположены.

Если эта статья была вам полезна, поблагодарите автора — активно плюсуем.

Добавляйтесь в подписчики блога БЛОGГЕР и вы будете всегда в курсе последних событий, и узнаете интересные идеи

4 комментария для “Как сделать красивые кнопки или кнопку — ссылку”
  1. Вот всегда был благодарен людям, открывающие простые истины ламерам. Я в админки ничего не шарю… Вот только благодаря таким как вы блогам и плаваю на поверхности — в хорошем смысле.

  2. Спасибо большое, очень полезный пост. Вроде мелочь, а очень полезно. Разноображу свой блог кнопочками. Спасибо еще раз!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *