Наверное, ни один сайт не обойдется без отсылочных на другие свои страницы кнопок. Всем хочется привлечь именно на свой сайт внимание, и при этом используются самые разные средства. В веб-дизайне к их числу относят оформление кнопок, которые отличаются по различным параметрам — и по размерам, и по форме, и по эффектам и так далее.
Кнопки 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 красивые кнопки, и путем подбора, добиваться желаемого результата.
Этими параметрами служат:
- цвет текста на кнопке;
- размер текста и кнопки;
- цвет градиента кнопки;
- радиус углов кнопки;
- и цвет ее обводки.
Собственно говоря, можно спокойно, без страха, экспериментировать и выбирать наилучший вариант. Несмотря на небольшое количество параметров, можно создать очень разнообразные по своему стилю кнопки.
