5.0 0.5 4 40

Как создать кнопку?

Андрей Ким
Андрей Ким
8 октября 2014
15
Оцените:
Как создать кнопку?

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

Дизайн кнопки

Разработать дизайн кнопки можно с помощью специальных онлайн сервисов, например, здесь. Данный сервис очень прост в управлении: можно выбрать форму и цвет кнопки (Color/Form), ее тип (Gradation Type), установить степень прозрачности (Thickness). Если необходимо создать кнопку с узором, например, линовкой, во вкладке Stripe можно задать ее параметры – частоту линовки, ее яркость и цвет.

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

Тем не менее, если есть желание создать что-то абсолютно уникальное, разрабатывать дизайн кнопки придется в Photoshop или Adobe Illustrator.

Вставка кнопки

Вставка кнопки осуществляется следующим образом:

  • <img src="files/picture/pic1.jpg" width="300" height="115">,

где "files/picture/pic1.jpg" - путь к файлу кнопки, а "300" и "115" – параметры кнопки (ее ширина и высота в пикселях).

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

Конечно, кнопка как украшение мало кого интересует. Она должна вести куда-то, то есть содержать ссылку. Дабы вставить кнопку со ссылкой, расширяем наш тег:

  • <a href="http://www.elhow.ru/" target="_blank"> <img src=" files/picture/pic1.jpg alt="Далее" width="300" height="115" border="0"></a>

Рассмотрим это подробнее:

  • http://www.elhow.ru/ - адрес, на который "переместит" нас кнопка.
  • target="_blank" – означает, что ссылка будет открыта в новой вкладке.
  • параметр "alt" – если изображение кнопки по каким-то причинам не может загрузиться, вместо него пользователь увидит прямоугольник размером с кнопку, а в нем текст, заданный после "alt".
  • border="0" означает, что вокруг кнопки не будет рамки. Если желаете, чтобы она была, вместо "0" укажите ее желаемый размер – 1,2,3 и т.д. Цифра определяет число ширину рамки в пикселях.

Вот, собственно, и все – кнопка создана.

Как видите, задача создания кнопки довольно простая. Больше о том, как прокачать свой сайт, читайте в статьях раздела Создание сайта.

Подписывайтесь на наши группы в социальных сетях - смешные статьи, картинки и факты!