Как сделать красивую кнопку с помощью CSS
UPD. Как сделать красивую кнопку с помощью CSS3
Продолжаю серию уроков по улучшению внешнего вида сайта с помощью 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
Только щас о таком узнал спасибо
tarasikblЦитировать
После того как кнопка нажата она меняет цвет на серый.
Денис КлимонтовЦитировать
Хороший цвет у кнопки. И вообще хорошо получилось. Все больше сталкиваюсь с такой проблемой, вот и решение.
FuzaylovЦитировать
Все верно, Денис. Это и делает псевдо-класс :focus. Получается эффект, что после нажатия кнопка как бы неактивна и нажимать ее еще раз не нужно.
АвторЦитировать
Класс сегодня же такое попробую, спасиб:)
ВадикЦитировать
Ага, цвет хорош!
SanyaЦитировать
opat vernylsa na etot sajt ctob skazat spasibo
DefilerЦитировать
замечание по поводу кроссбраузерности: лучше использовать в качестве кнопки тип submit. C батоном не все гладко в IE6 (нужны шаманские пляски). Лично я еще добавляю :active чтобы действительно выглядело как полноценное нажатие.
Повелитель теговЦитировать
Тип кнопки я выбрала в качестве примера, согласна что лучше использовать input.
АвторЦитировать
Спасибо большое!
RushyanЦитировать
Вот это пост! Сильно. Спасибо.
SmokEЦитировать
Ух ты! Здорово! Спасибо за совет. Мне очень понравился то эффект, когда кликаешь по кнопке и она становится серой!
BorodinaЦитировать
За последнюю фичу спасибо
терапи екатеринбургЦитировать
Кнопочка конечно красивая, но мне кажется что у нее края недостаточно оформлены…
Семен БрукваЦитировать
Ребята,подскажите пожалуйста как сделать ссылку для скачивания в кнопке.Кнопочка супер спасибо за урок .
Всеволод КозинЦитировать
Спасибо огромное! Сделал по примеру даже цвета не менял! Может тоже кому-нибудь пригодится
Автору реZпект!
AlexZЦитировать
о спс на поледней кнопке я поменял цвет теперь он лучше чем был
kengikЦитировать
.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;
}
kengikЦитировать
А как сделать так чтобы после нажатия кнопки тебя кидало на нужный адресс! вообще как прикрепить адресс к кнопке?
РустамЦитировать
С помощью JS:
Блог для вебмастеровЦитировать
ещё бы дождаться поддержки css 3…. )))) можно что хочешь будет сделать ))
Блоггер-музыкантЦитировать
Народ все сделал как написано в oper’E работает, в IE нет(((
Повелитель тегов пишет:
замечание по поводу кроссбраузерности: лучше использовать в качестве кнопки тип submit. C батоном не все гладко в IE6 (нужны шаманские пляски). Лично я еще добавляю :active чтобы действительно выглядело как полноценное нажатие.
пробовал не помогает( может нужно в стилях тоже писать вместо “button”-”sumbit”???
igore4eGЦитировать
Странно. У меня кнопка почемуто не работает..Хотя я прописал адрес страницы куда она должна вести.
АлексанлрЦитировать
еще нужно outline: none добавить.
CPЦитировать
Вот псевдо класс .focus фещь по настоящему полезная! Спасибо.
VenzelЦитировать
ребят,а как сделать,чтобы после нажатия на эту клевую кнопку переходила на другую страничку?сижу и парю чета..((что не делала все никак не получается..(подскажите плиз..(
ОльгаЦитировать
Посмотрите комментарии выше, уже задавали такой вопрос
АвторЦитировать
не переходит он…пробовала…
ОльгаЦитировать
Рабочий пример
АвторЦитировать
Большое спасибо
МаксимЦитировать
Большое спасибо, все просто и понятно, а главное, результат радует )))
СветланаЦитировать
Мне самый первый вариант больше всего понравился, даже не пришлось дальше делать, по дизайну и так подошло.
ДмитрийЦитировать
Надо тоже сделать что-то похожие
ДмитрийЦитировать
Дякую. Дуже корисна стаття. Я навіть не знав що так можна)).
СергейЦитировать
Какие-то блеклые кнопочки получаются. Сейчас в css3 куда красивее можно сделать
ФёдорЦитировать
Кому нужна кнопка с эффектом нажатия? Например, нажал на кнопку, и через 5 минут перенесло на какую-нибудь страницу, или еще что-нибудь. Хорошо разбераюсь в JavaScript примерно средний уже. Могу помочь с похожими эффектами. Могу дать прям щас какой-нибудь эффект, например чтобы через определенное время перенесло на страницу какую-нибудь. Это файл JavaScript.js:
function redir(){
var delay = 500
SetTimeout(“Location:тут_адрес_сайта_на_который_будет_совершён_редирект, delay”)
}
Это файл html:
заголовок_на_окне_браузера
.
В данном случае через 5 секунд после нажатия кнопки перейдет, на сайт. Естественно вместо “тут_адрес_сайта_на_который_будет_совершен_редирект”, адрес сайта на который будет совершен редирект.
P.S Еще не проверял если будут ошибки пишите мне al_ima@mail.ru
al_imЦитировать
А забыл, тут работает HTML, ну все равно, вот этот код
[head]
[meta http-equiv="Content-type" content="text/html; charset=windows-1251"]
[script type="text/javascript" src="JavaScript.js"][/script]
[title>заголовок_на_окне_браузера[/title]
[/head]
[body]
[input type="button" onClick="redir();" value="название_кнопки"]
[/body].
Вместо угловых скобок, я написал квадратные, так как тут работает HTML.
al_imЦитировать
Не поняла смысл, зачем заставлять юзер ждать? Он за это время 10 раз успеет еще раз нажать кнопку, думая что она не рабочая. Эффект активности кнопки не нужно задерживать, т.к. смысл не в том, чтобы показать какая она красивая в этот момент, а в том, чтобы показать, что она рабочая и разработчик позаботился об этом.
Блог для вебмастеровЦитировать
код нужно обрамлять тегом <code> </code> чтобы не вырезался ;)
Блог для вебмастеровЦитировать
Можно сделать простую кнопку как ссылка на HTML, или можно это сделать на JS. На HTML это можно сделать как обычный текст – ссылка, если кто не знает [a href="адрес_сайта"]текст – ссылка[/a], с помощью JS:
function redir(){
header(“Location: адрес_сайта”);
}.
А потом только применить эту функцию. И все.
al_imЦитировать
Эту функцию можно применять и не на такие случаи, например может пригодиться когда адрес сайта поменяли например был а потом поменяли на , когда пользователь зайдет на страницу увидит текст, что у этого сайта новый адрес, а эту функцию можно поставить в контейнер
, только без function и фигурных скобок. И может пригодиться. И спасибо на счет.al_imЦитировать
“И спасибо на счет ”
al_imЦитировать
“В контейнер [head]“, кстате почему-то не работает , [head] не показал.
al_imЦитировать
Объясните, плиз, мне, суперчайнику и тормозу, в каком конкретно месте в:
прописывать стили???
А лучше – дайте, плиз, готовый код на эту суперкнопочку.
MFЦитировать
В коде страницы перед тегом </head> напишите:
<style type="text/css">a:hover {text-decoration:underline}
</style>
либо найдите на вашем сайте файл стилей (с раширением .css) и в конец файла добавьте строку, которую писала в предыдущем комментарии
Блог для вебмастеровЦитировать
Спасибо, конечно, за ответ, но я запутался напрочь!!! У себя на сайте с помощью внешнего кода установил пока серую кнопочку. Разобрался, как с помощью неё переходить на другие страницы и как изменить название кнопки, а дальше для меня всё равно тёмный лес. Я Вас очень прошу – просто сбросьте мне код уже готовой (меняющей цвет) кнопки,
markford@mail.ru
а дальше я постараюсь разобраться!
Спасибо!
MFЦитировать
Прошу прощения, не вам отвечала.. Вышлю вам код.
Блог для вебмастеровЦитировать
А как, используя этот код,сделать так, чтоб ссылка открывалась в новом окне.
LolyЦитировать
Блог для вебмастеров – классная ава, я тоже был фанатом этой анимешки. А теперь по теме:
Первое что хочется сказать, что очень жаль, что не все браузеры читают CSS3.
А так, ваш пример очень похож на простую html кнопочку, просто стилизованную при помощи css. Я тоже так экспериментировал. Вот мой вид эксперимента:
В теле дока можно написать простую кнопку:
В тэг “form” ставить параметр class=”z” бесполезно, он нужен для ссылки скорее всего.
Class=”z” – а под этим параметром, я спрятал вот такой вот код:
Этот CSS код, можно написать в голове дока, или в отдельном CSS файле:
input.z{font-size:22px;color:white; border-radius: 10px;width:62px;height:45px;background: url(http://vselennia.ucoz.ru/b/volk-5.jpg);}
input.z{
font: bold 14px Verdana, Arial, sans-serif;
text-decoration: none;
text-indent: 1px;
color: #FFFFCC;
background: url(http://vselennia.ucoz.ru/b/volk-5.jpg);
display: block;
width: 62px;
line-height: 22px;
height: 45px;
border-radius: 7px;
}
input.z:hover{
background-position: 0px -45px;
text-decoration: none;
color: #FFFFCC;
}
Короче, бреда тут много. Но в принципе красиво. В ИЕ правда, даже картиночка не меняется. А в мазиле благодаря тэгу “border-radius: 7px;” углы кнопочки скругляются. А в гуге и опере углы не скругляются, но картиночка меняется. Но в принципе, создаётся эффект прозрачности кнопки, что ли. Картинка становится её задним не подвижным фоном, а надпись “Ссылка на сайт” как бы становится написанной на кнопке и является подвижной. А так же, возникает еще один фокус. По скольку размеры кнопки твёрдо определены, то надпись “Ссылка на сайт”, естественно в неё полностью не поместиться. Но! Если навести на кнопку курсор мышки и нажать на неё, но не отпускать, то в некоторых случаях, эта надпись начнёт двигаться как в бегущей строке. В чём причина такого фокуса, я не знаю.
Если честно, мне просто тема показалась прикольной, и ава автора тоже. Вот и решил поделится своими наблюдениями. Надеюсь что, не сильно взбесил.
Волк HTML извращенецЦитировать
Что то у меня сама кнопочка в первом комменте не захотела прописываться, вот и написал второй комент, специально для неё.
Волк HTML извращенецЦитировать
Понял, кнопочка писаться не хочет вообще.
Волк HTML извращенецЦитировать