Как поставить кнопку на сайт – простая кнопка на сайте

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

Тег <button>

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

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

<a href="ссылка_на_главную_или_любую_другую_страницу"> 
<button>Button</button></a>

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

<a href="ссылка_на_главную_или_любую_другую_страницу"> 
<button style="background-color: black; color: red;">Button</button></a>

Результат:
Button

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

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

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

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

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

Графическая кнопка на сайте

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

<a href="ссылка_на_главную_или_любую_другую_страницу"> 
  <img src="ссылка_на_картинку_кнопки"></a>

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

.button:hover {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

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

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

<a href="ссылка_на_главную_или_любую_другую_страницу"> 
<button class="button" style="background-color: black; color: red;">Button</button> 
</a>

Результат:
Нажми меня

Анимационная кнопка на сайте

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