Продолжаю серию уроков по улучшению внешнего вида сайта с помощью 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.
