Оригинал сообщения

Продолжаю серию уроков по улучшению внешнего вида сайта с помощью CSS кода. Напомню предыдущие статьи:
Способы оформления цитат с помощью CSS

Как сделать красивую ссылку?

Сегодня урок будет посвящен оформлению кнопок, внимания которым, как правило, практически не уделяется: они выглядят серыми и скучными.

Вот так выглядит обычная кнопка типа button:
Сразу можно назвать несколько минусов использования таких кнопок по умолчанию:

• отсутствует эффект при наведении на кнопку


• не меняется внешний курсора


• не соотвествует дизайну

Исправить эту ситуацию поможет несколько строчек CSS кода.

Создание flash эффекта перелистывания страницы на сайте

Компания “DOM-SB” предлагает профессиональные услуги: установка домофонов и других систем контроля доступа. Гарантия безопасности вашего дома.

Компания “МСКС” произведет качественный ремонт сантехники в течении суток. Предоставление гарантии на выполненную работу.

Почему в Москве живется вольготней собакам, а не москвичам? Статья о том, как делают бизнес бизнес на бродячих собаках.

Что такое вирусный маркетинг? Блог Владимира Мартынова о психологии и реалиях интернета.

Пусть наша кнопка будет иметь класс button:

<input type="button" value="Пример кнопки" class="button" />

Теперь можно прописать стили:

.button {

height:30px;

border-color:#c2e254 #9bb838 #9bb838 #c2e254;

border-style:solid;

border-width:1px;

background:#c2e254;

cursor:pointer;

}

Тогда наша кнопка будет выглядеть уже намного симпатичнее:
Теперь пропишем стили для эффекта наведения и нажатия на кнопку:

.button:hover {

border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66;

border-style:solid;

border-width:1px;

background:#FFFF99;

}



.button:focus {

background:#ddd;

border-color:#ddd #333 #333 #ddd;

border-style:solid;

border-width:1px;

}

Что получилось:
Псевдо класс :focus отвечает за вид кнопки после нажатия, но, правда, сохраняется только до того момента пока фокус не перейдет на другой элемент. Несмотря на это и то, что IE6 не знает этот псевдо класс, я считаю его использование полезным. В качестве альтернативы, как правило, управление поведением кнопки передается JavaScript’у.

В вышеприведенном примере для оформления кнопок мы не использовали изображений. О том, как правильно сделать кнопку с фоновым изображением читайте в статье: Input vs Button.

[показать]LIci WP - WordPress crossposting plugin