Продолжаем работу над созданием и изменением вида html кнопки для сайта.


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

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


<a href="www.sozdat-svoysayt.ru"><button style="background-image: url(../images/primer-knopki.gif)"><font color="red" style="font-size:24px">html кнопка.</font></button></a>


Смотрите что у нас получилось - это рабочая ссылка в виде кнопки она указывает на главную страницу сайта www.sozdat-svoysayt.ru можете проверить работоспособность кнопки-ссылки.





2). Вот ещё одно интересное применение с элементом title для создания описания кнопки, когда мы подносим указатель к нему оно выводит описание нашей html кнопки. Это ещё нужно, если мы используем его как ссылку.


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


Теперь наведите указатель на кнопку и вы увидите описание.





3). Убираем бордюр вокруг нашей кнопки. Посмотрите, в примере я выделил красным, где мы добавили дополнительное свойство.


<button style="border:none" title="html кнопка"><font color="red" style="font-size:24px">html кнопка.</font></button>


Вот реальный вид кнопки без бордюра из примера в браузере.





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



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