Как создать html кнопки для сайта. Как из кнопки сделать ссылку.

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

1) В первую очередь посмотрим как создать обычную html кнопку, используем открывающий <button> и закрывающий </button> элементы. Ниже смотрите пример использования кода. Сохраните этот код в теле html документа как мы и делали в первых уроках изучения html структуры и откройте в браузере.


<button>Самая простая html кнопка</button>


Вот как это будет выглядеть в браузере, кнопка растягивается по объёму содержащего в ней текста. Можете даже нажать на него.





2) Посмотрим, как задавать фоновый цвет для кнопки, здесь мы используем красный цвет.


<button style="background:red">Самая простая html кнопка</button>


Итог примера с применением фонового цвета.





3) Смотрим пример html кнопки с увеличенным в нём до 24 пикселей текстом.


<button style="font-size:24px">Увеличенный текст внутри кнопки</button>


Итог примера с применением увеличенного текста.





4) А вот вариант как написать код для html кнопки с увеличенным в нём до 24 пикселей и измененный на зелёный цвет текстом и красным фоном.


<button style="background:red"><font color="green" style="font-size:24px"> html кнопка</font></button>


Итог примера с применением увеличенного зелёного текста и красным фоном.





5) Теперь давайте рассмотрим, как задавать фоновое изображение для нашей html кнопки. Посмотрите, как нужно указывать фоновое изображение. Здесь я указываю полный путь до своей папки с изображением, а вам нужно указать, где находится ваше изображение. Если оно у вас находится в одной папке что и страница с кнопкой, то можно указать внутри скобок вот так: primer-knopki.gif.


<button style="background-image: url(../images/primer-knopki.gif)">html кнопка с фоновым изображением</button>


Итог примера применения фонового изображения. Обратите внимание изображение подогнался под размер кнопки, а сама кнопка как мы уже знаем, подгоняется под содержащий в ней текста.





6) Давайте посмотрим как сделать чтоб наш кнопка была ещё и ссылкой.


<a href="../index.php"><button>Эта html кнопка стало ссылкой и указывает на главную страницу сайта.</button></a>


Смотрите наша кнопка стала ссылкой на главную страницу этого сайта можете щелкнуть и проверить ссылку она вполне рабочая.





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



Рейтинг@Mail.ru   Яндекс.Метрика