Кнопки CSS. Преимущества. Стили. Эстетичность

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

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

Для начала, чтобы не было путаницы и недопонимания, стоит разобраться в некоторых понятиях.

CSS, что это

CSS, означающее в переводе "каскадные таблицы стилей", на сегодняшний день является одной из основных технологий в интернете. Без этого языка вряд ли обойдется хоть один сайт.

CSS-код — это инструкции для браузеров, содержащие информацию, как отображать элементы на странице и где это делать.

Удобно хранить такие инструкции в отдельном файле, имеющем расширение .css. С другой стороны, можно их поместить и в начале html-документа.

Кнопка на сайт. Какая она бывает

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

Кнопки бывают статичные, анимированные, динамичные, со звуком и без него.

Их можно специально создавать, например, в фотошопе, и загружать на сайт изображение, а можно легко и быстро придумать их в CSS.

Кнопки CSS

Сделать такие кнопки очень просто. Большим преимуществом их применения является то, что их в любой момент, буквально за пару секунд, можно изменить до неузнаваемости.

Как известно, у кнопок есть три положения:

• покоя, когда с ней ничего не делают, а просто просматривают страницу;
• положения, с наведенным на нее курсором;
• и активации при нажатии.

В полной мере кнопки точно отобразятся в таких браузерах, как Firefox, Safari, Opera, Chrome. В то же время в Internet Explorer 9 кнопки не смогут отобразиться в полной мере. Например, закругления углов, тень текста и обводка вокруг кнопки не будут видны здесь из-за того, что такие свойства не поддерживаются этим браузером. Тем не менее, в целом CSS-кнопки для сайта выглядят достойно в этой версии браузера. В Internet Explorer 8 и других версиях ниже восьмой у кнопки не будет видна объемность, но, в то же время, сохранится видимость градиентов.

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

Получается, что даже если поддержка некоторых свойств CSS в браузерах Internet Explorer и отсутствует, то такие кнопки все равно будут выглядеть более выигрышными по сравнению с простыми изображениями, потому что единственное, чего лишатся пользователи в Internet Exporer, так это видеть эстетичность современных технологий по веб-дизайну. Но это совершенно несущественный недостаток.

Для каждого положения задается свой стиль. Эти стили прописываются в специальном файле .css или между тегами head в самой странице сайта.

Место кнопки на сайте

Между тэгами body записывается код:

где

id=”button2” здесь означает имя, присваиваемое кнопке,

href=”ГИПЕРССЫЛКА” здесь дается непосредственная ссылка на необходимый документ,

ТЕКСТ — печатается текст, который будет отображаться на кнопке.

Стили для кнопок

1. Стиль кнопки CSS записывается отдельно в документе или в самой странице:

2. Вначале записываются кнопки CSS, когда они находятся в покое:

3. Далее записываются параметры, соответствующие кнопке, когда на нее наводят курсор. Если в данном случае изменяется только цвет и заливка, то и в стиле все остается прежним, кроме цвета и заливки:

4. И последний параметр касается положения кнопки, когда нажимается на нее курсор. Часто в таких случаях меняется лишь минимум, например, цвет, как и в этом случае:

CSS - красивые кнопки

Для создания кнопок можно использовать градиент. Лучше всего вначале кнопку нарисовать в каком-нибудь графическом редакторе, например, фотошопе, чтобы точно знать, какая она получится в итоге. Если использовать фотошоп, то в нем изначально уже имеются какие-то градиенты, но дополнительно можно загрузить еще и другие, такие, какие хотели бы, чтобы получились на сайте.

Экспериментируя с CSS-кодом и изменяя различные параметры, имеется возможность менять CSS красивые кнопки, и путем подбора, добиваться желаемого результата.

Этими параметрами служат:

- цвет текста на кнопке;

- размер текста и кнопки;

- цвет градиента кнопки;

- радиус углов кнопки;

- и цвет ее обводки.

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