Кнопка на сайте делает его более функциональным, наглядным и повышает юзабилити сайта. При нажатии на кнопку могут происходить разные действия, но в этой статье мы рассмотрим как поставить кнопку-ссылку на сайт, то есть такую кнопку при нажатии на которую можно скачать что-либо или перейти на другую страницу.
Тег <button>
Тег <button> это простой тег HTML, с помощью которого Вы легко создадите кнопку. Он применяется совместно с другими любыми тегами, просто все чтоб будет находится внутри тегов <button>… </button> будет находится внутри Вашей кнопки.
Вот например, — это кнопка, которая ведет на главную страницу сайта.
А вот код этой ссылки
1 2 |
<a href="ссылка_на_главную_или_любую_другую_страницу"> <button>Button</button></a> |
Конечно, простая серая кнопка выглядит совсем не презентабельно, поэтому Вы всегда можете добавить атрибут style и задать нужные стили кнопки:
1 2 |
<a href="ссылка_на_главную_или_любую_другую_страницу"> <button style="background-color: black; color: red;">Button</button></a> |
Как сделать кнопку из изображения. Кнопка — картинка
Стандартные кнопки сделанные с помощью тега <button> это безусловно хорошо и просто. Но что, если Вы хотите, чтобы кнопкой являлось нужное Вам изображение? Хотите сделать кнопку из картинки? Поверьте это тоже очень просто.
Для начала Вам нужна сама эта картинка. Ее Вы можете сделать в Фотошопе. Но я пользуюсь замечательной программой Web Button Deluxe Maker, с помощью которой создаю кнопки на любой вкус. Вы можете скачать Web Button Deluxe Maker на моем сайте. Кнопка с помощью Web Button Deluxe maker
Сама программа очень простая и интуитивно понятна. Для того, чтобы сделать кнопку достаточно выполнить всего несколько простых шагов:
- Ввести текст кнопки;
- Отредактировать шрифт (можно и не редактировать, оставить как есть);
- Отредактировать размер (можно оставить как есть);
- Выбрать дизайн кнопки;
- Сохранить получившеюся кнопку
Вот и все. Кнопка с помощью Web Button Deluxe готова.
Графическая кнопка на сайте
Для того, чтобы разместить графическую кнопку (кнопку-картинку) на сайте, выбираете место на странице, где должна и вставляете следующий код:
1 2 |
<a href="ссылка_на_главную_или_любую_другую_страницу"> <img src="ссылка_на_картинку_кнопки"></a> |
И вот уже кнопка на вашем сайте. Но есть одно «но» — при наведении курсора на кнопку — ничего не происходит, и, таким образом, эта картинка не совсем похожа на кнопку. Но для этого, мы можем применить интересный стиль CSS.
Итак, в файл CSS стилей Вашего сайта нужно вставить следующий код:
1 |
.button:hover {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);} |
И тогда класс button наложит фильтр на изображение и создаст вот такой эффект:
К стати этот класс можно применять к любому тегу. При наведении курсора, этот класс накладывает фильтр прозрачности. Например, можем применить его и к тегу <button>. Напишем кнопку так:
1 2 3 |
<a href="ссылка_на_главную_или_любую_другую_страницу"> <button class="button" style="background-color: black; color: red;">Button</button> </a> |
Анимационная кнопка на сайте
С развитием CSS и появлением ее третей версией кнопки стало возможно создавать и без тега button. Всю анимацию можно сделать с помощью стилей CSS. При чем возможности тут поистине безграничны. Рекомендую вам познакомится с Моей коллекцией CSS3 кнопок
Спасибо. Вы мне очень помогли!))))
Спасибо, очень помогли
И Вам спасибо!