Как сделать красивую кнопку с помощью CSS
Продолжаю серию уроков по улучшению внешнего вида сайта с помощью 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.
Еще записи на эту тему
Dmoz
Только щас о таком узнал спасибо
Цитировать
После того как кнопка нажата она меняет цвет на серый.
Цитировать
Хороший цвет у кнопки. И вообще хорошо получилось. Все больше сталкиваюсь с такой проблемой, вот и решение.
Цитировать
Все верно, Денис. Это и делает псевдо-класс :focus. Получается эффект, что после нажатия кнопка как бы неактивна и нажимать ее еще раз не нужно.
Цитировать
Класс сегодня же такое попробую, спасиб:)
Цитировать
Ага, цвет хорош!
Цитировать
opat vernylsa na etot sajt ctob skazat spasibo
Цитировать
замечание по поводу кроссбраузерности: лучше использовать в качестве кнопки тип submit. C батоном не все гладко в IE6 (нужны шаманские пляски). Лично я еще добавляю :active чтобы действительно выглядело как полноценное нажатие.
Цитировать
Тип кнопки я выбрала в качестве примера, согласна что лучше использовать input.
Цитировать
Спасибо большое!
Цитировать
Вот это пост! Сильно. Спасибо.
Цитировать
Ух ты! Здорово! Спасибо за совет. Мне очень понравился то эффект, когда кликаешь по кнопке и она становится серой!
Цитировать
За последнюю фичу спасибо
Цитировать
Кнопочка конечно красивая, но мне кажется что у нее края недостаточно оформлены…
Цитировать
Ребята,подскажите пожалуйста как сделать ссылку для скачивания в кнопке.Кнопочка супер спасибо за урок .
Цитировать
Спасибо огромное! Сделал по примеру даже цвета не менял! Может тоже кому-нибудь пригодится
Автору реZпект!
Цитировать
о спс на поледней кнопке я поменял цвет теперь он лучше чем был
Цитировать
.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;
}
Цитировать
А как сделать так чтобы после нажатия кнопки тебя кидало на нужный адресс! вообще как прикрепить адресс к кнопке?
Цитировать
С помощью JS:
Цитировать
ещё бы дождаться поддержки css 3…. )))) можно что хочешь будет сделать ))
Цитировать
Народ все сделал как написано в oper’E работает, в IE нет(((
Повелитель тегов пишет:
замечание по поводу кроссбраузерности: лучше использовать в качестве кнопки тип submit. C батоном не все гладко в IE6 (нужны шаманские пляски). Лично я еще добавляю :active чтобы действительно выглядело как полноценное нажатие.
пробовал не помогает( может нужно в стилях тоже писать вместо “button”-”sumbit”???
Цитировать
Странно. У меня кнопка почемуто не работает..Хотя я прописал адрес страницы куда она должна вести.
Цитировать
еще нужно outline: none добавить.
Цитировать