Как поставить кнопку на сайт

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

Тег <button>

Тег <button> это простой тег HTML, с помощью которого Вы легко создадите кнопку. Он применяется совместно с другими любыми тегами, просто все чтоб будет находится внутри тегов <button>… </button> будет находится внутри Вашей кнопки.
Вот например, — это кнопка, которая ведет на главную страницу сайта.

А вот код этой ссылки

Конечно, простая серая кнопка выглядит совсем не презентабельно, поэтому Вы всегда можете добавить атрибут style и задать нужные стили кнопки:

Результат:

Как сделать кнопку из изображения. Кнопка — картинка

Стандартные кнопки сделанные с помощью тега <button> это безусловно хорошо и просто. Но что, если Вы хотите, чтобы кнопкой являлось нужное Вам изображение? Хотите сделать кнопку из картинки? Поверьте это тоже очень просто.

Для начала Вам нужна сама эта картинка. Ее Вы можете сделать в Фотошопе. Но я пользуюсь замечательной программой Web Button Deluxe Maker, с помощью которой создаю кнопки на любой вкус. Вы можете скачать Web Button Deluxe Maker на моем сайте. Кнопка с помощью Web Button Deluxe maker
Сама программа очень простая и интуитивно понятна. Для того, чтобы сделать кнопку достаточно выполнить всего несколько простых шагов:
кнопка на сайт

  1. Ввести текст кнопки;
  2. Отредактировать шрифт (можно и не редактировать, оставить как есть);
  3. Отредактировать размер (можно оставить как есть);
  4. Выбрать дизайн кнопки;
  5. Сохранить получившеюся кнопку

Вот и все. Кнопка с помощью Web Button Deluxe готова.

Установка графической кнопки на сайт

Для того, чтобы разместить графическую кнопку (кнопку-картинку) на сайте, выбираете место на странице, где должна и вставляете следующий код:

И вот уже кнопка на вашем сайте. Но есть одно «но» — при наведении курсора на кнопку — ничего не происходит, и, таким образом, эта картинка не совсем похожа на кнопку. Но для этого, мы можем применить интересный стиль CSS.
Итак, в файл CSS стилей Вашего сайта нужно вставить следующий код:

И тогда класс button наложит фильтр на изображение и создаст вот такой эффект:

кнопка

К стати этот класс можно применять к любому тегу. При наведении курсора, этот класс накладывает фильтр прозрачности. Например, можем применить его и к тегу <button>. Напишем кнопку так:

Результат:

Анимационные кнопки

С развитием CSS и появлением ее третей версией кнопки стало возможно создавать и без тега button. Всю анимацию можно сделать с помощью стилей CSS. При чем возможности тут поистине безграничны. Рекомендую вам познакомится с Моей коллекцией CSS3 кнопок

Разрабатывать дизайн кнопок также интересно как и разрабатывать дизайн баннера. Но Вы можете обратится и к профессионалам. Качественно и профессионально разработкой дизайна баннера занимаются на сайте http://www.designcontest.ru/.


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

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

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