5.0 0.5 3 15

Как сделать кнопку для сайта?

Наталья Козлова
Наталья Козлова
31 августа 2014
713
Оцените:
Как сделать кнопку для сайта?

Смотрите видео

Как сделать кнопку для сайта?

Кнопка на сайте – атрибут необязательный; без него вполне можно обойтись, делая простые текстовые ссылки или обычные меню в виде списка. Но изящная кнопка украсит страницу, выделит меню, заставит обратить внимание на, например, предложение внести страницу в закладки. Главное, чтобы её дизайн не противоречил общему стилю и содержанию ресурса.

Как сделать кнопку при помощи html

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

Как сделать кнопки скриптами, мы рассмотрим как-нибудь в следующий раз. Сейчас остановимся на простейшем варианте – html. Предположим, нужно оформить кнопками меню сайта: «Главная», «О компании», «Контакты» и т.п. Нужны кнопки с соответствующим текстом и ссылками, ведущими на указанные страницы.

Простая ссылка пишется так: <a href=”адрес страницы”>Текст ссылки</a>. Выглядеть эта конструкция будет так: Текст ссылки. Можно изменить шрифт. Например, так: <a font size="+1" color=#ff0000 href=”адрес страницы”>Текст ссылки</a>. В результате текст ссылки стал красным , шрифт увеличился на единицу. #ff0000 – это обозначение цвета. Коды разных цветов можно посмотреть в интернете. Например, вот здесь маленькая таблица основных цветов, которые можно указывать не кодами, а английскими словами. Полная таблица цветов и кодов находится тут.

Используем для кнопки CSS

Чтобы не прописывать код около каждой ссылки, создадим стиль ссылочного текста. Для этого в «голове» сайта, где-нибудь между тегами <HEAD> и </HEAD>, вставляем теги <style> и </style>, а между ними пишем, какой текст в ссылках мы хотим видеть. Делается это так:

<HEAD>

<style>

A { size: +1; COLOR: #0000ff }

</style>

</HEAD>

Но это обычная ссылка, хоть и оформленная нетрадиционно. Как же сделать кнопку? Для этого напишем текст ссылки на фоне, отличном от общего фона страницы. Пусть кнопка будет серого цвета, код цвета #999999. Добавляем атрибут «фон» - BACKGROUND. А подчёркивание ссылок лучше убрать. Значит, добавляем ещё один атрибут: TEXT-DECORATION: none.

<HEAD>

<style>

A { BACKGROUND: #999999; size: +1; COLOR: #ff0000; TEXT-DECORATION: none }

</style>

</HEAD>

При желании можно вокруг фона сделать рамку шириной в 1 пиксель чёрного цвета – атрибут BORDER: 1px solid #000000. Получаем:

<HEAD>

<style>

A { BORDER: 1px solid #000000; BACKGROUND: #999999; size: +1; COLOR: #ff0000; TEXT-DECORATION: none }

</style>

</HEAD>

Теперь у нас ссылка более крупным шрифтом красного цвета на сером фоне в чёрной рамке. Очень похоже на кнопку.

«Нажимающаяся» кнопка

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

<HEAD>

<style>

A { BACKGROUND: #999999; size: +1; BORDER: 1px solid #000000; COLOR: #ff0000; TEXT-DECORATION: none }

A:hover { BACKGROUND: #CCCCCC; BORDER: 1px solid #000000; COLOR: #ff0000; TEXT-DECORATION: none }

A:active { BACKGROUND: #666666; BORDER: 2px; COLOR: #ff0000 }

</style>

</HEAD>

Теперь мы имеем «нажимающуюся» кнопку. Чтобы убедиться в этом, скопируйте в блокнот нашу «голову», затем между тегами <body> и </body> напишите свою ссылку:

<HTML>

<HEAD>

<style>

A { BACKGROUND: #999999; size: +1; BORDER: 1px solid #000000; COLOR: #ff0000; TEXT-DECORATION: none }

A:hover { BACKGROUND: #CCCCCC; BORDER: 1px solid #000000; COLOR: #ff0000; TEXT-DECORATION: none }

A:active { BACKGROUND: #666666; BORDER: 2px; COLOR: #ff0000 }

</style>

</HEAD>

<body>

<a href=”адрес страницы”>Текст ссылки</a>

</body>

</HTML>

Сохраните файл с расширением .html. Откройте его в любом браузере, проверьте, как работает кнопка.

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