... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Создание ссылок-кнопок

 

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок


Создание ссылок-кнопок

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

Весь фокус заключается в том, что для ссылок в обычном состоянии задается стиль, имитирующий выпуклую кнопку. Определяются фон, рамка и цвет текста. Эффект "выпуклости" достигается подбором цвета границ. Когда кнопка выпуклая, ее верхняя и левая границы должны быть светлее по тону, чем нижняя и правая, когда кнопка выбирается (на нее наводится курсор), цвета границ меняются и кажется, что происходит "нажатие" кнопки. Для цвета границ лучше всего оттенки серого, они по тону подходят к любому цвету, какой бы вы ни указали для кнопки. При этом ссылка остается ссылкой, а не кнопкой.

Проиллюстрируем сказанное на примере. Запишем стиль для ссылки в обычном состоянии:

A {
background:#0099FF;
border-top: 1px solid #D5D5D5;
border-left: 1px solid #D5D5D5;
border-bottom: 1px solid #4E4E4E;
border-right: 1px solid #4E4E4E;
color:#FFFF99;
font: 0.8em Tahoma, sans-serif;
text-decoration:none; padding: 2px 5px;
}

А теперь для ссылки во время наведения на нее курсора мыши меняем местами цвета границ:

A: hover {
border-top: 1px solid #4E4E4E;
border-left: 1px solid #4E4E4E;
border-bottom: 1px solid #D5D5D5;
border-right: 1px solid #D5D5D5;
}

Запишем код нескольких ссылок, чтобы посмотреть на результат:

<A HREF="#">Главная</А>
<A HREF="#">0 компании</А>
<A HREF="#">Продукция</А>
<A HREF="#">Галерея</А>

При этом вы получите очень интересный эффект - ОТКРЫТЬ ПРИМЕР

 

Оформление элементов форм с CSS ||  Изменение стиля полосы прокрутки ||  Использование нескольких стилей
Создание ссылок-кнопок

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены